/* ============================================================
   RYX LANGUAGE — styles.css
   Production · v2026
   
   Stack:  Instrument Serif · Epilogue · Syne · Fragment Mono
   Colors: Warm editorial — ink, paper, terracotta
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   01. @layer ARCHITECTURE
   Defines cascade order — specificity never fights again
   ────────────────────────────────────────────────────────── */
@layer reset, tokens, base, layout, components, utilities, overrides;


/* ──────────────────────────────────────────────────────────
   02. FONT IMPORTS
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Instrument+Serif:ital@0;1&family=Syne:wght@400;500;600;700;800&display=swap');

/* ──────────────────────────────────────────────────────────
   03. REGISTERED CUSTOM PROPERTIES  (@property — CSS 2026)
   Enables animated transitions on custom properties
   ────────────────────────────────────────────────────────── */
@property --razen-accent-hue {
  syntax: '<number>';
  inherits: true;
  initial-value: 18;
}

@property --razen-glow-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --razen-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --razen-gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}


/* ──────────────────────────────────────────────────────────
   04. DESIGN TOKENS  (root variables)
   ────────────────────────────────────────────────────────── */
@layer tokens {

  :root {
    /* ── Color Primitives (OKLCH — perceptually uniform) ── */
    --hue-accent:       18;           /* terracotta red-orange    */
    --hue-accent-warm:  28;           /* amber variant            */
    --hue-cool:         215;          /* steel blue               */

    /* Paper tones */
    --color-paper-0:    oklch(98% .012 80);   /* near white        */
    --color-paper-1:    oklch(96% .018 80);   /* default bg        */
    --color-paper-2:    oklch(93% .022 78);   /* elevated surface  */
    --color-paper-3:    oklch(89% .025 76);   /* border / rule     */

    /* Ink tones */
    --color-ink-0:      oklch(14% .018 60);   /* true deep ink     */
    --color-ink-1:      oklch(22% .016 60);   /* heading           */
    --color-ink-2:      oklch(38% .014 65);   /* body              */
    --color-ink-3:      oklch(55% .012 70);   /* muted / meta      */
    --color-ink-4:      oklch(68% .010 72);   /* disabled          */

    /* Accent — Terracotta */
    --color-accent:     oklch(58% .18 var(--hue-accent));
    --color-accent-dim: oklch(52% .15 var(--hue-accent));
    --color-accent-bg:  oklch(95% .04  var(--hue-accent));
    --color-accent-glow:oklch(65% .20 var(--hue-accent) / .25);

    /* Code surface */
    --color-code-bg:    oklch(16% .015 60);
    --color-code-text:  oklch(82% .018 70);
    --color-code-dim:   oklch(46% .012 65);

    /* Semantic aliases */
    --bg:               var(--color-paper-1);
    --bg-raised:        var(--color-paper-0);
    --bg-sunken:        var(--color-paper-2);
    --border:           var(--color-paper-3);
    --text:             var(--color-ink-2);
    --text-heading:     var(--color-ink-1);
    --text-muted:       var(--color-ink-3);
    --text-disabled:    var(--color-ink-4);
    --accent:           var(--color-accent);
    --accent-dim:       var(--color-accent-dim);

    /* ── Typography Scale ── */
  --font-display:  'Instrument Serif', 'Georgia', serif;
  --font-body:     'Geist', 'Helvetica Neue', sans-serif;
  --font-label:    'Syne', system-ui, sans-serif;
  --font-mono:     'Geist Mono', 'Courier New', monospace;

    /* Fluid type — clamp(min, fluid, max) */
    --text-xs:          clamp(.65rem,   .6rem + .25vw,  .75rem);
    --text-sm:          clamp(.78rem,   .75rem + .2vw,  .875rem);
    --text-base:        clamp(.9rem,    .88rem + .2vw,  1rem);
    --text-md:          clamp(1rem,     .95rem + .35vw, 1.15rem);
    --text-lg:          clamp(1.15rem,  1rem + .6vw,    1.4rem);
    --text-xl:          clamp(1.4rem,   1.1rem + 1.2vw, 2rem);
    --text-2xl:         clamp(1.9rem,   1.4rem + 2vw,   3rem);
    --text-3xl:         clamp(2.6rem,   2rem + 3vw,     4.5rem);
    --text-hero:        clamp(3.2rem,   2.5rem + 4.5vw, 7rem);

    /* ── Spacing Scale  (0.25rem base unit) ── */
    --space-1:    .25rem;
    --space-2:    .5rem;
    --space-3:    .75rem;
    --space-4:    1rem;
    --space-5:    1.25rem;
    --space-6:    1.5rem;
    --space-8:    2rem;
    --space-10:   2.5rem;
    --space-12:   3rem;
    --space-16:   4rem;
    --space-20:   5rem;
    --space-24:   6rem;
    --space-32:   8rem;

    /* Fluid spacing */
    --section-pad-y:    clamp(var(--space-12), 8vw, var(--space-32));
    --section-pad-x:    clamp(var(--space-6),  6vw, var(--space-16));
    --content-max:      72rem;
    --prose-max:        68ch;

    /* ── Radii ── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   22px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-xs:   0 1px 2px oklch(14% .018 60 / .06);
    --shadow-sm:   0 2px 6px oklch(14% .018 60 / .08),
                   0 1px 2px oklch(14% .018 60 / .06);
    --shadow-md:   0 4px 16px oklch(14% .018 60 / .10),
                   0 2px 4px  oklch(14% .018 60 / .06);
    --shadow-lg:   0 12px 36px oklch(14% .018 60 / .14),
                   0 4px  8px  oklch(14% .018 60 / .08);
    --shadow-xl:   0 24px 64px oklch(14% .018 60 / .18);
    --shadow-glow: 0 0 32px var(--color-accent-glow);
    --shadow-inset:inset 0 1px 3px oklch(14% .018 60 / .08);

    /* ── Borders ── */
    --border-width:     1px;
    --border-style:     solid;
    --border-default:   var(--border-width) var(--border-style) var(--border);
    --border-accent:    var(--border-width) var(--border-style) var(--accent);
    --border-muted:     var(--border-width) var(--border-style)
                        color-mix(in oklch, var(--border) 60%, transparent);

    /* ── Motion ── */
    --ease-spring:      cubic-bezier(.34, 1.56, .64, 1);
    --ease-out-expo:    cubic-bezier(.19, 1, .22, 1);
    --ease-in-out-sine: cubic-bezier(.37, 0, .63, 1);
    --ease-standard:    cubic-bezier(.4, 0, .2, 1);

    --duration-instant: 80ms;
    --duration-fast:    140ms;
    --duration-normal:  220ms;
    --duration-slow:    380ms;
    --duration-xslow:   600ms;

    /* ── Z-index scale ── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-tooltip:   600;

    /* ── Grid ── */
    --grid-cols:        12;
    --gutter:           clamp(var(--space-4), 3vw, var(--space-8));

    /* ── Focus ring ── */
    --focus-ring:       0 0 0 3px var(--color-accent-bg),
                        0 0 0 5px color-mix(in oklch, var(--accent) 40%, transparent);
  }


  /* ── Dark mode via color-scheme ── */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-paper-0:   oklch(13% .016 60);
      --color-paper-1:   oklch(11% .014 60);
      --color-paper-2:   oklch(16% .018 62);
      --color-paper-3:   oklch(22% .016 64);

      --color-ink-0:     oklch(97% .008 80);
      --color-ink-1:     oklch(93% .010 80);
      --color-ink-2:     oklch(82% .012 75);
      --color-ink-3:     oklch(62% .012 72);
      --color-ink-4:     oklch(45% .010 70);

      --color-accent:    oklch(66% .20  var(--hue-accent));
      --color-accent-dim:oklch(58% .16  var(--hue-accent));
      --color-accent-bg: oklch(20% .06  var(--hue-accent));
      --color-accent-glow:oklch(65% .22 var(--hue-accent) / .30);

      --color-code-bg:   oklch(10% .012 60);
    }
  }

  /* ── Manual dark mode class override ── */
  [data-theme="dark"] {
    --color-paper-0:   oklch(13% .016 60);
    --color-paper-1:   oklch(11% .014 60);
    --color-paper-2:   oklch(16% .018 62);
    --color-paper-3:   oklch(22% .016 64);
    --color-ink-0:     oklch(97% .008 80);
    --color-ink-1:     oklch(93% .010 80);
    --color-ink-2:     oklch(82% .012 75);
    --color-ink-3:     oklch(62% .012 72);
    --color-ink-4:     oklch(45% .010 70);
    --color-accent:    oklch(66% .20  var(--hue-accent));
    --color-accent-bg: oklch(20% .06  var(--hue-accent));
    --color-code-bg:   oklch(10% .012 60);
  }

  [data-theme="light"] {
    --color-paper-0:   oklch(98% .012 80);
    --color-paper-1:   oklch(96% .018 80);
    --color-paper-2:   oklch(93% .022 78);
    --color-paper-3:   oklch(89% .025 76);
    --color-ink-0:     oklch(14% .018 60);
    --color-ink-1:     oklch(22% .016 60);
    --color-ink-2:     oklch(38% .014 65);
    --color-ink-3:     oklch(55% .012 70);
    --color-code-bg:   oklch(16% .015 60);
  }

}


/* ──────────────────────────────────────────────────────────
   05. RESET
   ────────────────────────────────────────────────────────── */
@layer reset {

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    color-scheme: light dark;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    tab-size: 2;
    hanging-punctuation: first last;
  }

  body {
    min-block-size: 100dvh;
    /* ADD THIS */
    line-height:    1.6;
    font-variant-ligatures: common-ligatures; /* Adds pro-level font ligatures */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-optical-sizing: auto;
  }

  img, video, svg, canvas {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button { cursor: pointer; }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  p { text-wrap: pretty; }

  h1, h2, h3, h4 { text-wrap: balance; }

  a {
    color: inherit;
    text-decoration-skip-ink: auto;
  }

  ul, ol { list-style: none; }

  fieldset { border: none; }

  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: color-mix(in oklch, var(--accent) 25%, transparent);
    color: var(--text-heading);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

}


/* ──────────────────────────────────────────────────────────
   06. BASE STYLES
   ────────────────────────────────────────────────────────── */
@layer base {

  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--space-20);
  }

  body {
    font-family:    var(--font-body);
    font-size:      var(--text-base);
    font-weight:    400;
    line-height:    1.75;
    color:          var(--text);
    background:     var(--bg);
    transition:     background-color var(--duration-slow) var(--ease-standard),
                    color var(--duration-slow) var(--ease-standard);
  }

  /* ── Headings ── */
  h1, h2, h3, h4, h5, h6 {
    font-family:  var(--font-display);
    font-weight:  400;
    line-height:  1.1;
    color:        var(--text-heading);
    letter-spacing: normal;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; }
  h5 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; }
  h6 { font-size: var(--text-base); font-family: var(--font-label); font-weight: 700;
       letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

  /* Italic display variant */
  h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

  /* ── Body text ── */
  p { margin-block-end: var(--space-4); }
  p:last-child { margin-block-end: 0; }

  /* ── Links ── */
  a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-standard),
                text-decoration-color var(--duration-fast);
  }

  a:hover {
    color: var(--accent-dim);
    text-decoration-thickness: 2px;
  }

  /* ── Inline code ── */
  code {
    font-family:     var(--font-mono);
    font-size:       .88em;
    background:      var(--color-accent-bg);
    color:           var(--accent-dim);
    padding:         .1em .4em;
    border-radius:   var(--radius-xs);
    border:          1px solid color-mix(in oklch, var(--accent) 20%, transparent);
  }

  /* ── Block code ── */
  pre {
    font-family:  var(--font-mono);
    font-size:    var(--text-sm);
    line-height:  1.5;
    background:   var(--color-code-bg);
    color:        var(--color-code-text);
    padding:      var(--space-6) var(--space-8);
    border-radius:var(--radius-md);
    overflow-x:   auto;
    tab-size:     2;
    border-inline-start: 3px solid var(--accent);
  }

  pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 1em;
    color: inherit;
    border-radius: 0;
  }

  /* ── Blockquote ── */
  blockquote {
    font-family:  var(--font-display);
    font-style:   italic;
    font-size:    var(--text-lg);
    line-height:  1.45;
    color:        var(--text-heading);
    padding-inline-start: var(--space-6);
    border-inline-start:  3px solid var(--accent);
    margin-block: var(--space-8);
  }

  blockquote cite {
    display: block;
    font-family: var(--font-label);
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-start: var(--space-3);
  }

  /* ── HR ── */
  hr {
    border: none;
    border-block-start: var(--border-default);
    margin-block: var(--space-12);
  }

  /* ── Small / strong / em ── */
  small { font-size: var(--text-xs); }

  strong {
    font-weight: 600;
    color: var(--text-heading);
  }

  mark {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--text-heading);
    border-radius: var(--radius-xs);
    padding: .05em .25em;
  }

  /* ── Scrollbar styling ── */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--bg-sunken); }
  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

}


/* ──────────────────────────────────────────────────────────
   07. LAYOUT
   ────────────────────────────────────────────────────────── */
@layer layout {

  /* ── Wrapper / Container ── */
  .container {
    width: 100%;
    max-inline-size: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--section-pad-x);
  }

  .container--narrow { max-inline-size: 56rem; }
  .container--wide   { max-inline-size: 90rem; }
  .container--full   { max-inline-size: none; }

  /* ── Section ── */
  .section {
    padding-block: var(--section-pad-y);
  }

  .section--flush    { padding-block: 0; }
  .section--sm       { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }

  /* ── Grid system  (CSS subgrid aware) ── */
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--gutter);
  }

  /* Shorthand col spans */
  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-10 { grid-column: span 10; }
  .col-12 { grid-column: span 12; }

  /* ── Flex helpers ── */
  .flex     { display: flex; }
  .flex-col { display: flex; flex-direction: column; }
  .flex-center  { display: flex; align-items: center; justify-content: center; }
  .flex-between { display: flex; align-items: center; justify-content: space-between; }
  .flex-wrap    { flex-wrap: wrap; }
  .gap-2  { gap: var(--space-2); }
  .gap-4  { gap: var(--space-4); }
  .gap-6  { gap: var(--space-6); }
  .gap-8  { gap: var(--space-8); }
  .gap-12 { gap: var(--space-12); }

  /* ── Stack  (vertical rhythm) ── */
  .stack > * + * { margin-block-start: var(--space-4); }
  .stack--sm > * + * { margin-block-start: var(--space-2); }
  .stack--lg > * + * { margin-block-start: var(--space-8); }
  .stack--xl > * + * { margin-block-start: var(--space-16); }

  /* ── Prose  (long-form readable content) ── */
  .prose {
    max-inline-size: var(--prose-max);

    & h1, & h2, & h3 { margin-block-start: var(--space-10); }
    & h4, & h5, & h6 { margin-block-start: var(--space-6); }
    & p { margin-block-end: var(--space-5); }

    & ul, & ol {
      padding-inline-start: var(--space-6);
      margin-block-end: var(--space-5);
    }

    & li { margin-block-end: var(--space-2); }

    & ul { list-style: disc; }
    & ol { list-style: decimal; }

    & pre { margin-block: var(--space-6); }
    & blockquote { margin-block: var(--space-8); }
    & hr { margin-block: var(--space-10); }
  }

  /* ── Sticky header offset ── */
  .sticky-top {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
  }

}


/* ──────────────────────────────────────────────────────────
   08. COMPONENTS
   ────────────────────────────────────────────────────────── */
@layer components {

  /* ════════════════════════════════
     NAVBAR
     ════════════════════════════════ */
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
    padding-inline: var(--section-pad-x);
    background: color-mix(in oklch, var(--bg) 85%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-block-end: var(--border-muted);
    z-index: var(--z-sticky);
  }
  /* ADD THIS to fix the CSS Containing Block bug in styles.css */
  .navbar:has(.nav__links.open) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  .navbar__logo {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--text-heading);
    text-decoration: none;
    letter-spacing: -.02em;
    line-height: 1;

    em { font-style: italic; color: var(--accent); }
  }

  .navbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .nav-link {
    font-family:     var(--font-label);
    font-size:       var(--text-xs);
    font-weight:     600;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    color:           var(--text-muted);
    text-decoration: none;
    transition:      color var(--duration-fast);
    position:        relative;

    &::after {
      content: '';
      position: absolute;
      inset-block-end: -3px;
      inset-inline-start: 0;
      inline-size: 0;
      block-size: 1px;
      background: var(--accent);
      transition: inline-size var(--duration-normal) var(--ease-out-expo);
    }

    &:hover {
      color: var(--accent);
      &::after { inline-size: 100%; }
    }

    &[aria-current="page"] {
      color: var(--accent);
      &::after { inline-size: 100%; }
    }
  }


  /* ════════════════════════════════
     HERO
     ════════════════════════════════ */
  .hero {
    padding-block: var(--section-pad-y);
    container-type: inline-size;

    &:has(.hero__visual) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gutter);
      align-items: center;
    }
  }

  .hero__kicker {
    font-family:     var(--font-label);
    font-size:       var(--text-xs);
    font-weight:     700;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--accent);
    margin-block-end: var(--space-4);
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);

    &::before {
      content: '';
      display: inline-block;
      inline-size: var(--space-8);
      block-size: 1px;
      background: var(--accent);
    }
  }

  .hero__title {
    font-family:    var(--font-display);
    font-size:      var(--text-hero);
    font-weight:    400;
    line-height:    1.0;
    letter-spacing: -.025em;
    color:          var(--text-heading);
    text-wrap:      balance;
  }

  .hero__sub {
    font-family:    var(--font-body);
    font-size:      var(--text-md);
    font-weight:    300;
    color:          var(--text-muted);
    line-height:    1.7;
    max-inline-size:52ch;
    margin-block:   var(--space-6) var(--space-8);
  }

  .hero__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-4);
    align-items: center;
  }


  /* ════════════════════════════════
     BUTTONS
     ════════════════════════════════ */
  .btn {
    font-family:   var(--font-label);
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
    display:       inline-flex;
    align-items:   center;
    justify-content:center;
    gap:           var(--space-2);
    padding:       var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    border:        2px solid transparent;
    cursor:        pointer;
    position:      relative;
    overflow:      hidden;
    transition:    background var(--duration-normal) var(--ease-standard),
                   color var(--duration-normal) var(--ease-standard),
                   border-color var(--duration-normal) var(--ease-standard),
                   box-shadow var(--duration-normal) var(--ease-standard),
                   transform var(--duration-fast) var(--ease-spring);

    /* Ripple layer */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: white;
      opacity: 0;
      transition: opacity var(--duration-fast);
    }

    &:active {
      transform: scale(.97);
      &::before { opacity: .08; }
    }

    /* ── Variants ── */
    &.btn--primary {
      background:   var(--text-heading);
      color:        var(--color-paper-0);
      border-color: var(--text-heading);

      &:hover {
        background:   var(--accent);
        border-color: var(--accent);
        box-shadow:   var(--shadow-glow);
      }
    }

    &.btn--accent {
      background:   var(--accent);
      color:        var(--color-paper-0);
      border-color: var(--accent);

      &:hover {
        background:   var(--accent-dim);
        border-color: var(--accent-dim);
        box-shadow:   var(--shadow-glow);
      }
    }

    &.btn--outline {
      background:   transparent;
      color:        var(--text-heading);
      border-color: var(--text-heading);

      &:hover {
        border-color: var(--accent);
        color:        var(--accent);
      }
    }

    &.btn--ghost {
      background:   transparent;
      color:        var(--accent);
      border-color: transparent;
      padding-inline: var(--space-2);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    &.btn--code {
      font-family:   var(--font-mono);
      background:    var(--color-code-bg);
      color:         var(--color-code-text);
      border-color:  var(--color-code-bg);
      letter-spacing:.02em;
      text-transform:none;
      font-weight:   400;

      &:hover { border-color: var(--accent); }
    }

    /* ── Sizes ── */
    &.btn--sm { padding: var(--space-2) var(--space-4); font-size: .6rem; }
    &.btn--lg { padding: var(--space-4) var(--space-10); font-size: .8rem; }
    &.btn--xl { padding: var(--space-5) var(--space-12); font-size: .85rem; }

    /* ── States ── */
    &:disabled, &[aria-disabled="true"] {
      opacity: .4;
      cursor: not-allowed;
      pointer-events: none;
    }
  }


  /* ════════════════════════════════
     BADGE / CHIP
     ════════════════════════════════ */
  .badge {
    font-family:   var(--font-label);
    font-size:     var(--text-xs);
    font-weight:   600;
    letter-spacing:.1em;
    text-transform:uppercase;
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       .25em .65em;
    border-radius: var(--radius-pill);
    line-height:   1;

    &.badge--default {
      background: var(--bg-sunken);
      color:      var(--text-muted);
      border:     var(--border-default);
    }

    &.badge--accent {
      background: var(--color-accent-bg);
      color:      var(--accent-dim);
      border:     1px solid color-mix(in oklch, var(--accent) 25%, transparent);
    }

    &.badge--mono {
      font-family:   var(--font-mono);
      font-size:     .7rem;
      text-transform:none;
      letter-spacing:.03em;
    }

    &.badge--new {
      background: oklch(72% .18 140 / .15);
      color:      oklch(42% .16 140);
      border:     1px solid oklch(72% .18 140 / .3);
    }
  }


  /* ════════════════════════════════
     CARD
     ════════════════════════════════ */
  .card {
    background:    var(--bg-raised);
    border:        var(--border-default);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    transition:    box-shadow var(--duration-normal) var(--ease-standard),
                   border-color var(--duration-normal) var(--ease-standard),
                   transform var(--duration-normal) var(--ease-standard);
    container-type: inline-size;

    &:hover {
      box-shadow:   var(--shadow-md);
      border-color: color-mix(in oklch, var(--accent) 30%, var(--border));
      transform:    translateY(-2px);
    }

    /* Card internals with CSS nesting */
    & .card__label {
      font-family:   var(--font-label);
      font-size:     var(--text-xs);
      font-weight:   700;
      letter-spacing:.15em;
      text-transform:uppercase;
      color:         var(--text-muted);
      margin-block-end: var(--space-3);
    }

    & .card__title {
      font-family: var(--font-display);
      font-size:   var(--text-lg);
      line-height: 1.2;
      color:       var(--text-heading);
      margin-block-end: var(--space-3);
    }

    & .card__body {
      font-size:   var(--text-sm);
      color:       var(--text);
      line-height: 1.7;
    }

    & .card__footer {
      margin-block-start: var(--space-5);
      padding-block-start: var(--space-4);
      border-block-start: var(--border-muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }
  }

  /* ── Card: code feature variant ── */
  .card--code {
    background:    var(--color-code-bg);
    border-color:  oklch(22% .016 64);
    color:         var(--color-code-text);

    &:hover { border-color: var(--accent); }

    & .card__title {
      font-family: var(--font-mono);
      font-size:   var(--text-base);
      color:       var(--color-code-text);
    }
  }


  /* ════════════════════════════════
     SECTION LABEL  (eyebrow text)
     ════════════════════════════════ */
  .eyebrow {
    font-family:   var(--font-label);
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:         var(--text-muted);
  }

  .eyebrow--accent { color: var(--accent); }


  /* ════════════════════════════════
     FORM ELEMENTS
     ════════════════════════════════ */
  .label {
    font-family:   var(--font-label);
    font-size:     var(--text-xs);
    font-weight:   600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:         var(--text-muted);
    display:       block;
    margin-block-end: var(--space-2);
  }

  .input {
    font-family:  var(--font-body);
    font-size:    var(--text-sm);
    font-weight:  400;
    color:        var(--text-heading);
    background:   var(--bg-raised);
    border:       var(--border-default);
    border-radius:var(--radius-sm);
    padding:      var(--space-3) var(--space-4);
    inline-size:  100%;
    transition:   border-color var(--duration-fast),
                  box-shadow var(--duration-fast);
    outline: none;

    &::placeholder { color: var(--text-disabled); }

    &:hover { border-color: var(--text-muted); }

    &:focus {
      border-color: var(--accent);
      box-shadow:   0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
    }
  }

  .input--mono {
    font-family: var(--font-mono);
    font-size:   var(--text-sm);
  }


  /* ════════════════════════════════
     CODE SYNTAX TOKENS
     ════════════════════════════════ */
  .token--comment  { color: oklch(48% .012 65); font-style: italic; }
  .token--keyword  { color: oklch(72% .20 var(--hue-accent)); }
  .token--string   { color: oklch(72% .16 140); }
  .token--number   { color: oklch(75% .18 var(--hue-accent-warm)); }
  .token--fn       { color: oklch(68% .16 220); }
  .token--type     { color: oklch(80% .14 var(--hue-accent-warm)); }
  .token--operator { color: oklch(75% .10 60); }
  .token--variable { color: oklch(85% .08 80); }

  /* ── Line numbers ── */
  .code-block {
    position: relative;
    counter-reset: line-num;

    & .line {
      display: flex;
      counter-increment: line-num;

      &::before {
        content: counter(line-num);
        display: inline-block;
        min-inline-size: 2.5rem;
        text-align: right;
        padding-inline-end: var(--space-4);
        color: var(--color-code-dim);
        font-size: .85em;
        user-select: none;
        flex-shrink: 0;
      }

      &:hover { background: oklch(20% .015 60 / .5); }
    }
  }


  /* ════════════════════════════════
     TABLE
     ════════════════════════════════ */
  .table {
    inline-size:     100%;
    border-collapse: collapse;
    font-size:       var(--text-sm);

    & thead {
      font-family:   var(--font-label);
      font-size:     var(--text-xs);
      font-weight:   700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:         var(--text-muted);
      border-block-end: var(--border-default);
    }

    & th, & td {
      padding:     var(--space-3) var(--space-5);
      text-align:  start;
    }

    & td { border-block-end: var(--border-muted); }

    & tbody tr {
      transition: background var(--duration-fast);

      &:hover { background: var(--bg-sunken); }

      & td:first-child { font-family: var(--font-mono); font-size: .82em; color: var(--accent-dim); }
    }
  }


  /* ════════════════════════════════
     TOOLTIP  (@starting-style — 2026)
     ════════════════════════════════ */
  [data-tooltip] {
    position: relative;

    &::after {
      content:       attr(data-tooltip);
      position:      absolute;
      inset-block-end: calc(100% + var(--space-2));
      inset-inline-start: 50%;
      translate:     -50% 0;
      font-family:   var(--font-label);
      font-size:     var(--text-xs);
      font-weight:   600;
      letter-spacing:.08em;
      white-space:   nowrap;
      background:    var(--color-ink-0);
      color:         var(--color-paper-0);
      padding:       var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      pointer-events:none;
      opacity:       0;
      scale:         .92;
      transition:    opacity var(--duration-fast) var(--ease-standard),
                     scale var(--duration-fast) var(--ease-spring);
    }

    &:hover::after {
      opacity: 1;
      scale: 1;
    }
  }


  /* ════════════════════════════════
     FOOTER
     ════════════════════════════════ */
  .footer {
    padding-block:  var(--space-10);
    padding-inline: var(--section-pad-x);
    border-block-start: var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);

    & .footer__copy {
      font-size:   var(--text-xs);
      font-weight: 300;
      color:       var(--text-muted);
    }

    & .footer__meta {
      font-family: var(--font-mono);
      font-size:   var(--text-xs);
      color:       color-mix(in oklch, var(--text-disabled) 60%, transparent);
    }
  }

}


/* ──────────────────────────────────────────────────────────
   09. UTILITIES
   ────────────────────────────────────────────────────────── */
@layer utilities {

  /* ── Typography utilities ── */
  .font-display  { font-family: var(--font-display)  !important; }
  .font-body     { font-family: var(--font-body)     !important; }
  .font-label    { font-family: var(--font-label)    !important; }
  .font-mono     { font-family: var(--font-mono)     !important; }
  .font-italic   { font-style:  italic !important; }
  .font-300      { font-weight: 300 !important; }
  .font-400      { font-weight: 400 !important; }
  .font-500      { font-weight: 500 !important; }
  .font-600      { font-weight: 600 !important; }
  .font-700      { font-weight: 700 !important; }

  .text-xs    { font-size: var(--text-xs) !important; }
  .text-sm    { font-size: var(--text-sm) !important; }
  .text-base  { font-size: var(--text-base) !important; }
  .text-md    { font-size: var(--text-md) !important; }
  .text-lg    { font-size: var(--text-lg) !important; }
  .text-xl    { font-size: var(--text-xl) !important; }
  .text-2xl   { font-size: var(--text-2xl) !important; }
  .text-3xl   { font-size: var(--text-3xl) !important; }
  .text-hero  { font-size: var(--text-hero) !important; }

  .text-heading  { color: var(--text-heading) !important; }
  .text-body     { color: var(--text) !important; }
  .text-muted    { color: var(--text-muted) !important; }
  .text-accent   { color: var(--accent) !important; }
  .text-balance  { text-wrap: balance !important; }
  .text-pretty   { text-wrap: pretty !important; }
  .text-upper    { text-transform: uppercase !important; }
  .text-caps     { letter-spacing: .12em !important; text-transform: uppercase !important; }
  .text-center   { text-align: center !important; }
  .text-end      { text-align: end !important; }

  /* ── Spacing utilities ── */
  .mt-auto  { margin-block-start: auto !important; }
  .mb-auto  { margin-block-end: auto !important; }
  .mx-auto  { margin-inline: auto !important; }

  /* ── Color utilities ── */
  .bg-raised  { background: var(--bg-raised) !important; }
  .bg-sunken  { background: var(--bg-sunken) !important; }
  .bg-code    { background: var(--color-code-bg) !important; }
  .bg-accent  { background: var(--color-accent-bg) !important; }

  /* ── Border utilities ── */
  .border        { border: var(--border-default) !important; }
  .border-block  { border-block: var(--border-default) !important; }
  .border-accent { border-color: var(--accent) !important; }
  .rounded-sm    { border-radius: var(--radius-sm) !important; }
  .rounded-md    { border-radius: var(--radius-md) !important; }
  .rounded-lg    { border-radius: var(--radius-lg) !important; }
  .rounded-pill  { border-radius: var(--radius-pill) !important; }

  /* ── Shadow utilities ── */
  .shadow-sm { box-shadow: var(--shadow-sm) !important; }
  .shadow-md { box-shadow: var(--shadow-md) !important; }
  .shadow-lg { box-shadow: var(--shadow-lg) !important; }

  /* ── Visibility ── */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .not-sr-only {
    position: static;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}


/* ──────────────────────────────────────────────────────────
   10. ANIMATIONS
   ────────────────────────────────────────────────────────── */
@layer overrides {

  @keyframes fade-up {
    from { opacity: 0; translate: 0 var(--space-4); }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes scale-in {
    from { opacity: 0; scale: .92; }
    to   { opacity: 1; scale: 1; }
  }

  @keyframes slide-right {
    from { opacity: 0; translate: calc(var(--space-4) * -1) 0; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }

  /* ── Animation utility classes ── */
  .anim-fade-up   { animation: fade-up var(--duration-slow) var(--ease-out-expo) both; }
  .anim-fade-in   { animation: fade-in var(--duration-slow) var(--ease-standard) both; }
  .anim-scale-in  { animation: scale-in var(--duration-normal) var(--ease-spring) both; }

  /* Staggered delays */
  .anim-delay-1 { animation-delay: 80ms; }
  .anim-delay-2 { animation-delay: 160ms; }
  .anim-delay-3 { animation-delay: 240ms; }
  .anim-delay-4 { animation-delay: 320ms; }
  .anim-delay-5 { animation-delay: 400ms; }

  /* ── View Transitions  (CSS 2026) ── */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: fade-in var(--duration-normal) var(--ease-standard) reverse both;
  }

  ::view-transition-new(root) {
    animation: fade-up var(--duration-slow) var(--ease-out-expo) both;
  }


  /* ── Responsive  (container queries first, then breakpoints) ── */
  @container (max-width: 480px) {
    .card { padding: var(--space-4); }
  }

  @media (max-width: 768px) {
    .navbar__nav { display: none; }
    .hero:has(.hero__visual) { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }
    [class*="col-"] { grid-column: span 12; }
  }

  @media (max-width: 480px) {
    .hero__actions { flex-direction: column; align-items: flex-start; }
    .btn { inline-size: 100%; justify-content: center; }
    .table { font-size: var(--text-xs); }
    .table th, .table td { padding: var(--space-2) var(--space-3); }
  }

}