/* ============================================================================
   Link to NetEra (design-tokens.css) single source of truth for every visual
   decision. Every other stylesheet references these variables.

   2026-10-04: the site takes the palette of the "v3-alethia" design (design B)
   while every component keeps its own design (design A). Two themes:

     DEFAULT  deep green: B's ground, lifted so no surface is ever black
              (#0F211D page, #132A25 bands, #17312B cards), acid #7DF2C8 accent
     LIGHT    B's light panel (#F4F5F2 page, white cards), deep-green text and
              a darker green accent, for anyone who switches with the toggle

   The default no longer follows the operating system: the site's identity is
   the green one. A visitor's own choice (the header toggle, saved as
   ltn_theme) still wins on every page.

   Contrast, measured on the surface each colour sits on:
     default  text #F2F6F3 14.6:1 on cards · muted #B3C3BC 7.5:1 · accent
              #7DF2C8 12.7:1 on the page, dark text on it 11.8:1
     light    text #07231C 15.9:1 on white · muted #4B615A 6.8:1 · accent
              #0A6B55 6.3:1 on white, white text on it 6.3:1
   ============================================================================ */

:root {
  color-scheme: dark;

  /* --------------------------------------------------------------------------
     COLOR: default theme (deep green)
     -------------------------------------------------------------------------- */

  /* Accent scale. teal-700 is the workhorse (links, buttons, active states);
     on the green ground it is design B's acid. */
  --teal-050: #132E28;   /* faint wash */
  --teal-100: #18392F;   /* tint chip bg */
  --teal-300: #7DF2C8;   /* decorative line-work */
  --teal-500: #5BD9AE;   /* decorative accent (dots, lines, icons) */
  --teal-600: #A5F7DA;
  --teal-700: #7DF2C8;   /* the accent */
  --teal-800: #A5F7DA;   /* hover goes brighter on dark */

  /* Violet: secondary, used sparingly (tags, illustration accents). */
  --violet-050: #171630;
  --violet-100: #201E3D;
  --violet-300: #B7ADFF;
  --violet-500: #8B7DFF;
  --violet-600: #B5AAFF;

  /* Neutrals */
  --ink-900: #F2F6F3;     /* headlines & body */
  --ink-800: #DCE7E2;     /* subheads */
  --slate-600: #B3C3BC;   /* muted text */
  --slate-400: #7E948C;   /* placeholders, disabled, decorative */
  --paper: #0F211D;       /* the ground */
  --page: #0F211D;
  --paper-soft: #17312B;  /* cards, wells, inset panels */
  --paper-mist: #1C3A33;  /* hover wash, wells */
  --line: #26423B;        /* hairline borders */
  --line-strong: #355A50; /* input borders, emphasized rules */
  /* Alternating section bands: a lighter green, never a darker black. */
  --section-band: #132A25;

  /* Terminal surfaces: the deepest green on the site, still not black. */
  --code-bg: #0B1A16;
  --code-surface: #10231E;
  --code-line: #22392F;
  --code-text: #E8F0EC;
  --code-muted: #8FA59D;
  --code-teal: #7DF2C8;
  --code-violet: #A99CFF;

  /* Feedback */
  --success-600: #5BD68F;
  --success-100: #12301F;
  --danger-600: #F98A8A;
  --danger-100: #341A1A;
  --warning-600: #F0B454;
  --warning-100: #32250F;

  /* Semantic aliases: components reference THESE, not raw scale steps */
  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --accent-soft: var(--teal-100);
  --accent-decor: var(--teal-500);
  --on-accent: #07231C;
  --text: var(--ink-900);
  --text-muted: var(--slate-600);
  --surface: var(--paper-soft);   /* cards lift off the ground */
  --surface-alt: var(--paper-mist);
  --border: var(--line);

  /* Page heroes: design B's hero ground: a soft acid glow and a faint dot
     grid over a green a step lighter than the page. */
  --hero-bg: #132B25;
  --hero-glow: rgba(125, 242, 200, 0.13);
  --hero-dot: rgba(242, 246, 243, 0.08);
  /* The sticky header: the ground colour, translucent over its blur. */
  --header-bg: rgba(15, 33, 29, 0.86);

  /* --------------------------------------------------------------------------
     SPACING: strict 8px scale. Multiples only; no ad-hoc values.
     -------------------------------------------------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  /* Section rhythm */
  --section-pad: clamp(var(--sp-8), 9vw, var(--sp-15));
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(var(--sp-2), 4vw, var(--sp-5));

  /* --------------------------------------------------------------------------
     TYPOGRAPHY: Space Grotesk (headings) / Inter (body) / JetBrains Mono (data)
     Hierarchy comes from weight CONTRAST, not heaviness.
     -------------------------------------------------------------------------- */
  --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --fs-xs: 0.8125rem;   /* 13 (eyebrows, meta */)
  --fs-sm: 0.875rem;    /* 14 (captions, table meta */)
  --fs-base: 1rem;      /* 16, body */
  --fs-md: 1.125rem;    /* 18, lead paragraphs */
  --fs-lg: 1.3125rem;   /* 21, card titles */
  --fs-xl: 1.625rem;    /* 26, h3 / feature titles */
  --fs-2xl: clamp(1.75rem, 3.2vw, 2.375rem);   /* h2 section titles */
  --fs-3xl: clamp(2rem, 4vw, 2.875rem);        /* page h1 */
  --fs-display: clamp(2.375rem, 5.2vw, 3.625rem); /* homepage hero */

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --track-tight: -0.022em;
  --track-wide: 0.14em;

  /* --------------------------------------------------------------------------
     SHAPE, DEPTH, MOTION
     -------------------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* On a dark ground shadow alone is invisible; borders do most of the work. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-header: 0 1px 0 var(--line), 0 6px 24px rgba(0, 0, 0, 0.3);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s var(--ease);
  --t: 0.3s var(--ease);
  --t-slow: 0.55s var(--ease);

  --z-header: 50;
  --z-drawer: 60;

  /* Focus: visible on every interactive element */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--teal-700);

  /* --------------------------------------------------------------------------
     MOTIFS: schematic grid + node dots
     -------------------------------------------------------------------------- */
  --grid-paper:
    linear-gradient(to right, rgba(242, 246, 243, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 246, 243, 0.045) 1px, transparent 1px);
  --grid-size: 32px 32px;

  --grad-brand: linear-gradient(135deg, var(--teal-500) 0%, var(--violet-500) 100%);
  --grad-soft: linear-gradient(135deg, #132E28 0%, #17312B 100%);
}

/* ============================================================================
   LIGHT THEME: design B's light panel. Opt-in with the header toggle
   (<html data-theme="light">). Only colours and depth change; every component
   reads the aliases, so nothing downstream needs editing.
   ============================================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --teal-050: #EEFBF5;
  --teal-100: #D9F5EA;
  --teal-300: #7DF2C8;
  --teal-500: #2BBE8C;
  --teal-600: #0B7A60;
  --teal-700: #0A6B55;
  --teal-800: #075645;

  --violet-050: #F6F5FF;
  --violet-100: #EEECFE;
  --violet-300: #B7ADFF;
  --violet-500: #6B5BFF;
  --violet-600: #5646E0;

  --ink-900: #07231C;
  --ink-800: #12342B;
  --slate-600: #4B615A;
  --slate-400: #8A9A94;
  --paper: #FFFFFF;
  --page: #F4F5F2;
  --paper-soft: #EEF1EC;
  --paper-mist: #E5EAE4;
  --line: #DCE2DE;
  --line-strong: #C3CDC8;
  --section-band: #E8EDE6;

  /* Terminals stay dark: B's deep green, not black. */
  --code-bg: #0F211D;
  --code-surface: #132A25;
  --code-line: #26423B;
  --code-text: #E8F0EC;
  --code-muted: #94A89F;
  --code-teal: #7DF2C8;
  --code-violet: #A99CFF;

  --success-600: #157F46;
  --success-100: #E3F6EC;
  --danger-600: #C23434;
  --danger-100: #FBEAEA;
  --warning-600: #8A5A00;
  --warning-100: #FBF1DE;

  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --accent-soft: var(--teal-100);
  --accent-decor: var(--teal-500);
  --on-accent: #FFFFFF;
  --text: var(--ink-900);
  --text-muted: var(--slate-600);
  --surface: var(--paper);
  --surface-alt: var(--paper-soft);
  --border: var(--line);

  --hero-bg: #FFFFFF;
  --hero-glow: rgba(43, 190, 140, 0.14);
  --hero-dot: rgba(7, 35, 28, 0.09);
  --header-bg: rgba(255, 255, 255, 0.86);

  --shadow-xs: 0 1px 2px rgba(7, 35, 28, 0.05);
  --shadow-sm: 0 2px 8px rgba(7, 35, 28, 0.06);
  --shadow-md: 0 6px 24px rgba(7, 35, 28, 0.08);
  --shadow-lift: 0 14px 36px rgba(7, 35, 28, 0.12);
  --shadow-header: 0 1px 0 var(--line), 0 6px 24px rgba(7, 35, 28, 0.06);

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--teal-700);

  --grid-paper:
    linear-gradient(to right, rgba(7, 35, 28, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(7, 35, 28, 0.045) 1px, transparent 1px);
  --grad-brand: linear-gradient(135deg, var(--teal-500) 0%, var(--violet-500) 100%);
  --grad-soft: linear-gradient(135deg, #EEFBF5 0%, #F6F5FF 100%);
}