/* ============================================================
   BeyondBridge: Design Tokens
   Import once at the top of your global stylesheet.
   ============================================================ */

:root {
  /* ---------- Color: Carbon (neutrals) ---------- */
  --carbon-50:  #F2F4F5;
  --carbon-100: #D8DCDF;
  --carbon-300: #9BA2A7;
  --carbon-600: #4A4E52;
  --carbon-800: #2B2D30;
  --carbon-900: #141416;

  /* ---------- Color: Cyan (accent) ---------- */
  --cyan-50:  #E6F9FC;
  --cyan-100: #B8EEF7;
  --cyan-300: #66DEEF;
  --cyan-500: #1BCDE8;
  --cyan-700: #0E9BB0;
  --cyan-900: #04344A;

  /* ---------- Color: surfaces ---------- */
  --white:  #FFFFFF;
  --ground: #F2F4F5;

  /* ---------- Color: semantic roles ---------- */
  --color-bg:           var(--ground);
  --color-surface:      var(--white);
  --color-text:         var(--carbon-900);
  --color-text-muted:   var(--carbon-600);
  --color-text-subtle:  var(--carbon-300);
  --color-border:       var(--carbon-100);
  --color-accent:       var(--cyan-500);
  --color-accent-hover: var(--cyan-700);
  --color-link:         var(--cyan-700);

  /* ---------- Color: signal ---------- */
  --success-bg: #E8F5EC; --success-border: #B8DFC0; --success-text: #1A5A2E;
  --warning-bg: #FDF4E3; --warning-border: #F0D79A; --warning-text: #8A5A0A;
  --error-bg:   #FBECEC; --error-border:   #ECB4B4; --error-text:   #8A1F1F;

  /* ---------- Gradient (use sparingly) ---------- */
  --gradient-spine: linear-gradient(90deg, #141416 0%, #1BCDE8 100%);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-cn:   'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-display:   72px;
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-cta:       15px;

  --lh-display:   1.05;
  --lh-heading:   1.15;
  --lh-body:      1.6;
  --lh-tight:     1.25;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:    0.22em;

  /* ---------- Spacing (4px base) ---------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-thin:  0.5px solid var(--carbon-100);
  --border-focus: 2px solid var(--cyan-500);

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 22, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 20, 22, 0.08);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --gutter:        24px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
}

/* ============================================================
   Base resets: wrapped in @layer base so Tailwind utilities
   (which sit in @layer utilities) can override colors and
   sizes set here. Without this layer, unlayered base rules
   win over any utility class.
   ============================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
  }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
  h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
  h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: -0.015em; }
  h4 { font-size: var(--fs-h4); line-height: 1.35; letter-spacing: -0.01em; }
  p  { margin: 0; }

  a {
    color: inherit;
    text-decoration: none;
  }
}
/* Opt-in body / prose link styling. Use .bb-link on content links
   inside articles or paragraphs. Chrome navigation should not use
   this. The generic border-bottom hover read as cheap. */
.bb-link {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-color: rgba(14, 155, 176, 0.32);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.bb-link:hover { text-decoration-color: var(--color-link); }

::selection { background: var(--cyan-100); color: var(--carbon-900); }

:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Utility classes
   ============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.hairline  { height: 1px; background: var(--color-border); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cyan-700);
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  font-weight: 600;
}

/* ============================================================
   Components
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font: 500 var(--fs-cta)/1 var(--font-sans);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--cyan-500); color: var(--white); }
.btn--primary:hover { background: var(--cyan-700); }
.btn--primary:active { background: var(--cyan-900); }
.btn--primary:disabled { background: var(--carbon-100); color: var(--carbon-300); cursor: not-allowed; }

.btn--secondary {
  background: transparent; color: var(--carbon-900);
  border: 0.5px solid var(--carbon-100);
}
.btn--secondary:hover { background: var(--carbon-50); }
.btn--secondary:active { background: var(--carbon-100); }

.btn--ghost { background: transparent; color: var(--cyan-500); }
.btn--ghost:hover { background: var(--cyan-50); }
.btn--ghost:active { background: var(--cyan-100); }

.card {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--cyan-50);
  color: var(--cyan-900);
  font-size: var(--fs-body-sm);
  font-weight: 500;
}

/* ============================================================
   Logo cursor blink
   ============================================================ */
@keyframes blink { 50% { opacity: 0; } }
.cursor-bar {
  display: inline-block;
  width: 0.09em; height: 1.15em;
  background: var(--cyan-500);
  margin-left: 0.06em;
  vertical-align: -10%;
  animation: blink 1.1s steps(1) infinite;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-display: 48px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
    --gutter:     16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}