/* ── PRIMITIVES ────────────────────────────────────────────────────────────
   Dark mode is a REMAP of these primitives only. Every semantic token below
   points at a primitive and never changes between modes, so a component that
   uses semantics theme-switches for free. Values are verbatim from the Figma
   `color` collection (126 variables). */
:root{
  --neutral-0:#ffffff;
  --neutral-25:#f9f9f9;
  --neutral-50:#f2f2f2;
  --neutral-100:#e6e6e6;
  --neutral-200:#cccccc;
  --neutral-300:#b4b3b1;
  --neutral-400:#9b9a97;
  --neutral-500:#82817d;
  --neutral-600:#6d6a5f;
  --neutral-700:#565243;
  --neutral-800:#39372d;
  --neutral-900:#242219;
  --neutral-1000:#12110d;

  --blue-0:#f7faff;
  --blue-25:#f0f4ff;
  --blue-50:#e1eaff;
  --blue-100:#c4d5ff;
  --blue-200:#9bbaff;
  --blue-300:#729eff;
  --blue-400:#528bff;
  --blue-500:#3379ff;
  --blue-600:#2861d4;
  --blue-700:#1d49be;
  --blue-800:#153589;
  --blue-900:#0f2459;
  --blue-950:#0c1c42;
  --blue-1000:#09142b;

  /* Alpha ramp — composed in Figma as variable expressions over ink/accent. */
  --alpha-ink-100:rgba(17,17,17,0.03);
  --alpha-ink-200:rgba(18,17,13,0.04);
  --alpha-ink-300:rgba(36,34,25,0.06);
  --alpha-accent-200:rgba(51,121,255,0.04);
  --alpha-accent-300:rgba(51,121,255,0.08);

  /* Defined in the file, bound to nothing. See readme.md "What is missing". */
  --green-50:#e6ffed; --green-400:#33e173; --green-500:#00cc52;
  --orange-50:#ffeddd; --orange-400:#ff8e27; --orange-500:#ff7a00;
  --yellow-50:#fffce6; --yellow-400:#f5de49; --yellow-600:#b39e00;
}

/* ── SEMANTIC ───────────────────────────────────────────────────────────────
   Declared on .dark as well as :root. A custom property that references
   another is resolved on the element that declares it, so semantics declared
   only on :root would keep their light values inside a .dark subtree even
   though its primitives are remapped. Re-declaring them on .dark makes them
   resolve against the dark primitives there. */
:root,.dark{
  --background-page:var(--neutral-0);
  --background-raised:var(--neutral-25);
  --background-sunken:var(--neutral-50);
  --background-inverse:var(--neutral-900);
  --background-tinted:var(--blue-25);

  --text-primary:var(--neutral-900);
  --text-secondary:var(--neutral-700);
  --text-tertiary:var(--neutral-500);
  --text-inverse:var(--neutral-0);
  --text-tinted:var(--blue-500);

  --border-subtle:var(--neutral-50);
  --border-default:var(--neutral-100);
  --border-strong:var(--neutral-300);
  --border-focus:var(--neutral-700);
  --border-tinted:var(--blue-500);

  --icon-primary:var(--neutral-800);
  --icon-secondary:var(--neutral-600);
  --icon-tertiary:var(--neutral-400);
  --icon-inverse:var(--neutral-50);
  --icon-tinted:var(--blue-500);

  --field-background-default:var(--neutral-25);
  --field-background-active:var(--neutral-0);
  --field-background-filled:var(--neutral-25);
  --field-background-disabled:var(--neutral-50);
  --field-border-default:var(--neutral-100);
  --field-border-active:var(--neutral-300);
  --field-border-filled:var(--neutral-300);
  --field-border-disabled:var(--neutral-100);
  --field-text-default:var(--neutral-700);
  --field-text-active:var(--neutral-900);
  --field-text-filled:var(--neutral-900);
  --field-text-disabled:var(--neutral-500);
  --field-icon-default:var(--neutral-600);
  --field-icon-active:var(--neutral-800);
  --field-icon-filled:var(--neutral-800);
  --field-icon-disabled:var(--neutral-400);

  --button-mobile-primary-background-static:var(--neutral-900);
  --button-mobile-primary-background-pressed:var(--neutral-1000);
  --button-mobile-primary-background-disabled:var(--neutral-400);
  --button-mobile-primary-text-static:var(--neutral-0);
  --button-mobile-primary-text-pressed:var(--neutral-0);
  --button-mobile-primary-text-disabled:var(--neutral-100);
  --button-mobile-primary-icon-static:var(--neutral-50);
  --button-mobile-primary-icon-pressed:var(--neutral-50);
  --button-mobile-primary-icon-disabled:var(--neutral-200);
  --button-mobile-primary-underlay-static:var(--alpha-ink-200);
  --button-mobile-primary-underlay-disabled:var(--alpha-ink-200);

  --button-mobile-secondary-background-static:var(--blue-25);
  --button-mobile-secondary-background-pressed:var(--blue-500);
  --button-mobile-secondary-background-disabled:var(--neutral-50);
  --button-mobile-secondary-text-static:var(--blue-500);
  --button-mobile-secondary-text-pressed:var(--neutral-0);
  --button-mobile-secondary-text-disabled:var(--neutral-400);
  --button-mobile-secondary-icon-static:var(--blue-400);
  --button-mobile-secondary-icon-pressed:var(--blue-50);
  --button-mobile-secondary-icon-disabled:var(--neutral-200);
  --button-mobile-secondary-underlay-static:var(--alpha-accent-200);
  --button-mobile-secondary-underlay-pressed:var(--alpha-accent-200);
  --button-mobile-secondary-underlay-disabled:var(--alpha-ink-200);

  --button-mobile-tertiary-background-static:transparent;
  --button-mobile-tertiary-background-pressed:var(--blue-25);
  --button-mobile-tertiary-background-disabled:transparent;
  --button-mobile-tertiary-text-static:var(--blue-500);
  --button-mobile-tertiary-text-pressed:var(--blue-600);
  --button-mobile-tertiary-text-disabled:var(--neutral-400);
  --button-mobile-tertiary-icon-static:var(--blue-400);
  --button-mobile-tertiary-icon-pressed:var(--blue-500);
  --button-mobile-tertiary-icon-disabled:var(--neutral-300);
  --button-mobile-tertiary-underlay-static:transparent;
  --button-mobile-tertiary-underlay-pressed:var(--alpha-accent-200);
  --button-mobile-tertiary-underlay-disabled:transparent;

  /* Icon Button binds its own neutral pair — it does NOT reuse the blue
     secondary group above. See readme.md "Known defects". */
  --button-icon-primary-background-static:var(--neutral-900);
  --button-icon-primary-background-hover:var(--neutral-1000);
  --button-icon-primary-background-active:var(--neutral-900);
  --button-icon-secondary-background-static:var(--neutral-0);
  --button-icon-secondary-background-hover:var(--neutral-0);
  --button-icon-secondary-background-active:var(--neutral-0);

  --button-link-primary-text-static:var(--neutral-900);
  --button-link-primary-text-hover:var(--neutral-700);
  --button-link-primary-text-active:var(--neutral-1000);
  --button-link-secondary-text-static:var(--neutral-700);
  --button-link-secondary-text-hover:var(--neutral-900);
  --button-link-secondary-text-active:var(--neutral-800);
}

/* ── DARK MODE ─────────────────────────────────────────────────────────────
   Remaps the primitives. A few semantics also get an explicit override
   because the source overrides them rather than letting the remap carry them.
   This block comes after the semantic block, so on .dark these overrides win. */
:root[data-theme="dark"],.dark{
  --neutral-0:#12110d;
  --neutral-25:#1c1a13;
  --neutral-50:#242219;
  --neutral-100:#39372d;
  --neutral-200:#565243;
  --neutral-300:#6d6a5f;
  --neutral-400:#82817d;
  --neutral-500:#9b9a97;
  --neutral-600:#b4b3b1;
  --neutral-700:#cccccc;
  --neutral-800:#efedea;
  --neutral-900:#f2f2f2;
  --neutral-1000:#ffffff;

  --alpha-ink-100:rgba(255,255,255,0.05);

  --background-tinted:var(--blue-950);
  --border-subtle:var(--neutral-25);
  --border-strong:var(--neutral-200);
  --border-tinted:var(--blue-700);
  --text-tinted:var(--blue-400);
  --icon-tinted:var(--blue-400);
  --field-border-active:var(--blue-600);
  --field-text-disabled:var(--neutral-300);
  --field-icon-disabled:var(--neutral-200);
  --button-mobile-secondary-background-static:var(--blue-1000);
  --button-mobile-secondary-background-pressed:var(--neutral-1000);
  --button-mobile-secondary-text-static:var(--blue-400);
  --button-mobile-tertiary-background-pressed:var(--blue-900);
}