@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Design Tokens ── */
:root {
  /* Layout */
  --sidebar-width: 0px;
  --statusbar-height: 0px;

  /* Warp — fast streak-in for elements entering the viewport */
  --motion-warp-duration: 150ms;
  --motion-warp-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Pulse — rhythmic heartbeat for live/capacity indicators */
  --motion-pulse-duration: 2000ms;
  --motion-pulse-easing: ease-in-out;

  /* Glide — smooth open/close for palettes, panels, drawers */
  --motion-glide-duration: 250ms;
  --motion-glide-easing: cubic-bezier(0.33, 1, 0.68, 1);

  /* Counters — animated number transitions */
  --motion-counter-duration: 800ms;
  --motion-counter-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
  body > main,
  body > footer {
    margin-left: var(--sidebar-width, 0px);
    transition: margin-left 200ms ease;
  }
}

body {
  padding-bottom: var(--statusbar-height, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-warp-duration: 0ms;
    --motion-pulse-duration: 0ms;
    --motion-glide-duration: 0ms;
    --motion-counter-duration: 0ms;
  }
}

/* ── Surface Treatment Utilities ── */
@layer utilities {
  .logo-brand-tint {
    filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(194deg) brightness(0.75);
  }

  .glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    @apply bg-white/80 dark:bg-slate-900/80;
  }

  .dot-grid {
    position: relative;
  }

  .dot-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }

  .noise-bg {
    position: relative;
  }

  .noise-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
}

/* line 1, app/assets/stylesheets/scaffolds.scss */
#error_explanation {
  background-color: #cee4f3;
  padding: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}
@charset "UTF-8";
/*
 * Brisk Design System — companion to Tailwind.
 * Only styles that cannot be expressed as Tailwind utilities belong here.
 *


 */
/* ── Minimal CSS Variables (used by classes below) ── */
/* line 10, app/assets/stylesheets/application.scss */
:root {
  --color-primary: #2563eb;
  --color-accent: #06b6d4;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --border-radius-lg: 0.75rem;
}

/* ── Typography ── */
/* line 19, app/assets/stylesheets/application.scss */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* line 26, app/assets/stylesheets/application.scss */
.hero-text {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* ── Navigation ── */
/* line 33, app/assets/stylesheets/application.scss */
.nav-link {
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* line 38, app/assets/stylesheets/application.scss */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.2s ease-in-out;
}

/* line 49, app/assets/stylesheets/application.scss */
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ── Auth / OAuth ── */
/* line 55, app/assets/stylesheets/application.scss */
.google-blue {
  background: #4285f4;
  transition: all 0.2s ease-in-out;
}

/* line 60, app/assets/stylesheets/application.scss */
.google-blue:hover {
  background: #3367d6;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Demo Pages ── */
/* line 67, app/assets/stylesheets/application.scss */
.rails-demo-inline {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* line 73, app/assets/stylesheets/application.scss */
.special-bright {
  -webkit-filter: brightness(10000%);
  filter: brightness(10000%);
}

/* line 78, app/assets/stylesheets/application.scss */
.brisk-rails-demo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-lg);
}

/* ── Console / Log Styling ── */
/* line 88, app/assets/stylesheets/application.scss */
.log_line {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ── ANSI Color Themes (light) ── */
/* line 96, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-black-fg {
  color: #000000;
}

/* line 97, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-red-fg {
  color: #bb0000;
}

/* line 98, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-green-fg {
  color: #00bb00;
}

/* line 99, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-yellow-fg {
  color: #bbbb00;
}

/* line 100, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-blue-fg {
  color: #0000bb;
}

/* line 101, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-magenta-fg {
  color: #bb00bb;
}

/* line 102, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-cyan-fg {
  color: #00bbbb;
}

/* line 103, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-white-fg {
  color: white;
}

/* line 104, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-black-fg {
  color: #555555;
}

/* line 105, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-red-fg {
  color: #ff5555;
}

/* line 106, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-green-fg {
  color: lime;
}

/* line 107, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-yellow-fg {
  color: #ffff55;
}

/* line 108, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-blue-fg {
  color: #5555ff;
}

/* line 109, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-magenta-fg {
  color: #ff55ff;
}

/* line 110, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-cyan-fg {
  color: #55ffff;
}

/* line 111, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-white-fg {
  color: white;
}

/* line 112, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-black-bg {
  background-color: #000000;
}

/* line 113, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-red-bg {
  background-color: #bb0000;
}

/* line 114, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-green-bg {
  background-color: #00bb00;
}

/* line 115, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-yellow-bg {
  background-color: #bbbb00;
}

/* line 116, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-blue-bg {
  background-color: #0000bb;
}

/* line 117, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-magenta-bg {
  background-color: #bb00bb;
}

/* line 118, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-cyan-bg {
  background-color: #00bbbb;
}

/* line 119, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-white-bg {
  background-color: white;
}

/* line 120, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-black-bg {
  background-color: #555555;
}

/* line 121, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-red-bg {
  background-color: #ff5555;
}

/* line 122, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-green-bg {
  background-color: lime;
}

/* line 123, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-yellow-bg {
  background-color: #ffff55;
}

/* line 124, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-blue-bg {
  background-color: #5555ff;
}

/* line 125, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-magenta-bg {
  background-color: #ff55ff;
}

/* line 126, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-cyan-bg {
  background-color: #55ffff;
}

/* line 127, app/assets/stylesheets/application.scss */
.standard-console-ansi-theme .ansi-bright-white-bg {
  background-color: white;
}

/* ── ANSI Color Themes (dark / Tomorrow Night Eighties) ── */
/* line 132, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-black-fg {
  color: #3A3A3A;
}

/* line 133, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-red-fg {
  color: #DD948E;
}

/* line 134, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-green-fg {
  color: #B6D1AA;
}

/* line 135, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-yellow-fg {
  color: #F3D57C;
}

/* line 136, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-blue-fg {
  color: #8AA9D5;
}

/* line 137, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-magenta-fg {
  color: #CBAFD5;
}

/* line 138, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-cyan-fg {
  color: #9AD1D4;
}

/* line 139, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-white-fg {
  color: #EFEFEF;
}

/* line 140, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-black-fg {
  color: #5E5D5E;
}

/* line 141, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-red-fg {
  color: #E69B94;
}

/* line 142, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-green-fg {
  color: #D1F0C3;
}

/* line 143, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-yellow-fg {
  color: #F4D799;
}

/* line 144, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-blue-fg {
  color: #A6CBFE;
}

/* line 145, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-magenta-fg {
  color: #E7C7F2;
}

/* line 146, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-cyan-fg {
  color: #B0F0F5;
}

/* line 147, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-white-fg {
  color: #FFF;
}

/* line 148, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-black-bg {
  background-color: #3A3A3A;
}

/* line 149, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-red-bg {
  background-color: #DD948E;
}

/* line 150, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-green-bg {
  background-color: #B6D1AA;
}

/* line 151, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-yellow-bg {
  background-color: #F3D57C;
}

/* line 152, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-blue-bg {
  background-color: #8AA9D5;
}

/* line 153, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-magenta-bg {
  background-color: #CBAFD5;
}

/* line 154, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-cyan-bg {
  background-color: #9AD1D4;
}

/* line 155, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-white-bg {
  background-color: #EFEFEF;
}

/* line 156, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-black-bg {
  background-color: #5E5D5E;
}

/* line 157, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-red-bg {
  background-color: #E69B94;
}

/* line 158, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-green-bg {
  background-color: #D1F0C3;
}

/* line 159, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-yellow-bg {
  background-color: #F4D799;
}

/* line 160, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-blue-bg {
  background-color: #A6CBFE;
}

/* line 161, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-magenta-bg {
  background-color: #E7C7F2;
}

/* line 162, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-cyan-bg {
  background-color: #B0F0F5;
}

/* line 163, app/assets/stylesheets/application.scss */
.tomorrow-night-eighties-ansi-theme .ansi-bright-white-bg {
  background-color: #FFF;
}

/* ── CI Names Animation ── */
/* line 167, app/assets/stylesheets/application.scss */
.ci-names-scroll::before {
  content: "CircleCI";
  animation: animate infinite 30s;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes animate {
  0% {
    content: "CircleCI";
  }
  20% {
    content: "Github Actions";
  }
  40% {
    content: "Gitlab CI/CD";
  }
  60% {
    content: "Heroku CI";
  }
  80% {
    content: "Bitbucket Pipelines";
  }
}