/* ==========================================================================
   Arioron — design tokens
   Brand neutrals: 1C1C1C / DADDD8 / ECEBE4 / EEF0F2 / FAFAFF
   Dark mode derives additional surface steps from the same neutral family so
   surface hierarchy stays legible — it is designed, not inverted.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Raw brand palette ---------------------------------------------------- */
  --brand-ink:   #1C1C1C;
  --brand-mist:  #DADDD8;
  --brand-linen: #ECEBE4;
  --brand-cloud: #EEF0F2;
  --brand-paper: #FAFAFF;

  /* Semantic surfaces ---------------------------------------------------- */
  --bg:           #FAFAFF;
  --bg-sunken:    #ECEBE4;
  --bg-raised:    #FFFFFF;
  --bg-inverse:   #131314;
  --bg-veil:      rgba(250, 250, 255, 0.72);

  --text:         #1C1C1C;
  --text-muted:   rgba(28, 28, 28, 0.60);
  --text-faint:   rgba(28, 28, 28, 0.38);
  --text-inverse: #FAFAFF;

  --line:         rgba(28, 28, 28, 0.14);
  --line-soft:    rgba(28, 28, 28, 0.07);

  --mesh-rgb:     28, 28, 28;
  --mesh-alpha:   0.055;


  --shadow-sm: 0 2px 8px -2px rgba(28, 28, 28, 0.10);
  --shadow-md: 0 18px 40px -24px rgba(28, 28, 28, 0.28);
  --shadow-lg: 0 48px 90px -50px rgba(28, 28, 28, 0.42);

  /* Typography ----------------------------------------------------------- */
  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-display: clamp(2.9rem, 7.2vw, 6.4rem);
  --step-title:   clamp(2.3rem, 4.6vw, 4.1rem);
  --step-section: clamp(1.75rem, 2.9vw, 2.75rem);
  --step-sub:     clamp(1.15rem, 1.5vw, 1.45rem);
  --step-body:    1.0625rem;
  --step-small:   0.9375rem;
  --step-meta:    0.75rem;

  --leading-tight: 1.02;
  --leading-snug:  1.18;
  --leading-body:  1.62;

  --track-display: -0.035em;
  --track-title:   -0.028em;
  --track-meta:    0.09em;

  /* Space ---------------------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 176px; --sp-12: 224px;

  --section-y: clamp(80px, 11vw, 176px);

  /* Structure ------------------------------------------------------------ */
  --shell: 1460px;
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 68ch;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-full: 999px;

  /* Motion --------------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur-mid:  280ms;
  --dur-slow: 620ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark — explicit choice wins in both directions ------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #08080A;
  --bg-sunken:  #101013;
  --bg-raised:  #1A1A1E;
  --bg-inverse: #ECEBE4;
  --bg-veil:    rgba(8, 8, 10, 0.72);

  --text:         #F1F1F4;
  --text-muted:   rgba(241, 241, 244, 0.64);
  --text-faint:   rgba(241, 241, 244, 0.40);
  --text-inverse: #131314;

  --line:      rgba(241, 241, 244, 0.16);
  --line-soft: rgba(241, 241, 244, 0.09);

  --mesh-rgb:   218, 221, 216;
  --mesh-alpha: 0.07;

  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 48px 90px -50px rgba(0, 0, 0, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:         #08080A;
    --bg-sunken:  #101013;
    --bg-raised:  #1A1A1E;
    --bg-inverse: #ECEBE4;
    --bg-veil:    rgba(8, 8, 10, 0.72);

    --text:         #F1F1F4;
    --text-muted:   rgba(241, 241, 244, 0.64);
    --text-faint:   rgba(241, 241, 244, 0.40);
    --text-inverse: #131314;

    --line:      rgba(241, 241, 244, 0.16);
    --line-soft: rgba(241, 241, 244, 0.09);

    --mesh-rgb:   218, 221, 216;
    --mesh-alpha: 0.07;

    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, 0.75);
    --shadow-lg: 0 48px 90px -50px rgba(0, 0, 0, 0.9);
  }
}