/* QUISO LAB — Color system.
   Reduced to essentials: Graphite Black, White, Yellow. Everything else is a
   support tone for surfaces and dark-mode depth. Yellow is an accent only —
   used sparingly to highlight what truly matters. */
:root{
  /* ---- Base palette ---- */
  --qs-ink:#1A1A1A;        /* Graphite Black — foundation: technology, authority */
  --qs-white:#FFFFFF;      /* White — clarity, contrast */
  --qs-gold:#FFD100;       /* Yellow — intelligence in action (accent) */

  /* Yellow ramp */
  --qs-gold-hi:#FFE066;    /* lighter yellow — hover on gold */
  --qs-gold-lo:#E6BC00;    /* deeper yellow — pressed on gold */

  /* Ink / neutral ramp (light → dark) */
  --qs-white-2:#FAFAFA;    /* off-white page */
  --qs-neutral-100:#F5F5F3;/* light surface tint */
  --qs-neutral-200:#EDEDEA;/* subtle raised surface */
  --qs-neutral-300:#D8D8D6;/* low-contrast fill / disabled */
  --qs-neutral-500:#999999;/* muted text on light */
  --qs-ink-900:#111111;    /* raised surface on dark */
  --qs-ink-950:#0A0A0A;    /* deepest black */

  /* Alpha inks — hairlines, muted copy, overlays (on light backgrounds) */
  --qs-ink-a04:rgba(26,26,26,.04);
  --qs-ink-a06:rgba(26,26,26,.06);
  --qs-ink-a08:rgba(26,26,26,.08);
  --qs-ink-a10:rgba(26,26,26,.10);
  --qs-ink-a30:rgba(26,26,26,.30);
  --qs-ink-a55:rgba(26,26,26,.55);
  --qs-ink-a70:rgba(26,26,26,.70);
  /* Alpha whites — on dark backgrounds */
  --qs-white-a04:rgba(255,255,255,.04);
  --qs-white-a10:rgba(255,255,255,.10);
  --qs-white-a18:rgba(255,255,255,.18);
  --qs-white-a35:rgba(255,255,255,.35);
  --qs-white-a50:rgba(255,255,255,.50);
  --qs-white-a70:rgba(255,255,255,.70);

  /* Semantic — kept minimal to match the brand's restraint. Red exists only
     for error / "don't" states, never as a decorative color. */
  --qs-danger:#E0483E;
  --qs-success:#2E9E5B;

  /* ---- Semantic aliases (prefer these in components) ---- */
  --text-strong:var(--qs-ink);        /* headings, primary text on light */
  --text-body:var(--qs-ink-a70);      /* body copy on light */
  --text-muted:var(--qs-neutral-500); /* captions, meta on light */
  --text-on-dark:var(--qs-white);
  --text-on-dark-muted:var(--qs-white-a50);
  --text-accent:var(--qs-gold);

  --surface-page:var(--qs-white);
  --surface-page-alt:var(--qs-white-2);
  --surface-card:var(--qs-white);
  --surface-sunken:var(--qs-neutral-100);
  --surface-inverse:var(--qs-ink);    /* dark card / section */
  --surface-inverse-raised:var(--qs-ink-900);

  --border-subtle:var(--qs-ink-a10);
  --border-strong:var(--qs-ink);
  --border-on-dark:var(--qs-white-a18);

  --accent:var(--qs-gold);
  --accent-hover:var(--qs-gold-hi);
  --accent-press:var(--qs-gold-lo);
}