/* ==========================================================================
   AORI — Design Tokens
   A restrained, high-contrast system for a tool people stare at all day:
   flat surfaces, one accent hue, hairline borders, minimal shadow.
   ========================================================================== */

@font-face {
  font-family: "InterVariable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Typography ---------- */
  --font-sans: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Roboto Mono", monospace;

  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.8125rem;   /* 13 */
  --fs-md:  0.875rem;    /* 14 — body default */
  --fs-base:0.875rem;    /* 14 */
  --fs-lg:  0.9375rem;   /* 15 */
  --fs-xl:  1.125rem;    /* 18 */
  --fs-2xl: 1.375rem;    /* 22 */
  --fs-3xl: 1.625rem;    /* 26 */

  /* ---------- Space scale (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* ---------- Radii — small and consistent ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px;
  --r-lg: 10px; --r-xl: 12px; --r-2xl: 14px; --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 110ms;
  --dur:      180ms;
  --dur-slow: 300ms;

  /* ---------- Layout ---------- */
  --shell-max: 1280px;
  --topbar-h: 56px;

  /* Canvas colours of both themes, readable from JS (theme wipe). */
  --canvas-dark: #0a0a0a;
  --canvas-light: #f4f6f6;
}

/* ==========================================================================
   DARK — "White on black": near-black canvas, neutral greys, white ink.
   Palette: #dbdbdb #999999 #5f6062 #373839 #1f1f20 #0a0a0a
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0a0a0a;   /* canvas          */
  --bg-deep:       #050505;

  --surface:        #141415;  /* panels, cards   */
  --surface-2:      #1a1a1b;  /* panel heads, inputs */
  --surface-hover:  #232324;
  --surface-solid:  #141415;
  --surface-sunken: #0e0e0f;
  --nav-surface:    rgba(10, 10, 10, 0.92);

  --stroke:        #2b2b2c;
  --stroke-strong: #373839;   /* Dark Summoning  */
  --hairline:      #202021;

  --fg:     #dbdbdb;          /* Pixel White — 14.5:1 on canvas */
  --fg-2:   #999999;          /* Million Grey  —  7.0:1         */
  --fg-3:   #808183;          /*                  5.1:1         */
  --fg-inv: #0a0a0a;

  /* No hue in this palette: the accent is white, the way the reference is. */
  --accent:      #dbdbdb;
  --accent-hi:   #ffffff;
  --accent-fg:   #0a0a0a;
  --accent-soft: rgba(219, 219, 219, 0.1);
  --accent-line: rgba(219, 219, 219, 0.26);

  /* Status keeps hue so states stay distinguishable, lifted for near-black. */
  --ok:    #5fbf8c;  --ok-soft:   rgba(95, 191, 140, 0.13);
  --warn:  #d3a53f;  --warn-soft: rgba(211, 165, 63, 0.13);
  --err:   #e07272;  --err-soft:  rgba(224, 114, 114, 0.13);
  --info:  #7fa9cc;  --info-soft: rgba(127, 169, 204, 0.13);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 12px 32px -8px rgba(0, 0, 0, 0.75);

  --scrim: rgba(0, 0, 0, 0.75);
}

/* ==========================================================================
   LIGHT — neutral paper, same teal accent
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:      #f4f6f6;
  --bg-deep: #eef1f1;

  --surface:        #ffffff;
  --surface-2:      #f7f9f9;
  --surface-hover:  #f1f4f4;
  --surface-solid:  #ffffff;
  --surface-sunken: #f0f3f3;
  --nav-surface:    rgba(255, 255, 255, 0.9);

  --stroke:        #dce3e2;
  --stroke-strong: #c4cfcd;
  --hairline:      #e6ebea;

  --fg:     #0f2b29;
  --fg-2:   #4a5f5d;
  --fg-3:   #788b89;
  --fg-inv: #ffffff;

  --accent:      #00524d;
  --accent-hi:   #053931;
  --accent-fg:   #ffffff;
  --accent-soft: rgba(0, 82, 77, 0.08);
  --accent-line: rgba(0, 82, 77, 0.28);

  --ok:    #2f7d57;  --ok-soft:   rgba(47, 125, 87, 0.09);
  --warn:  #96690f;  --warn-soft: rgba(150, 105, 15, 0.1);
  --err:   #b04141;  --err-soft:  rgba(176, 65, 65, 0.08);
  --info:  #2c6b8f;  --info-soft: rgba(44, 107, 143, 0.08);

  --shadow-1: 0 1px 2px rgba(15, 43, 41, 0.06);
  --shadow-2: 0 2px 8px rgba(15, 43, 41, 0.07);
  --shadow-3: 0 12px 32px -8px rgba(15, 43, 41, 0.18);

  --scrim: rgba(15, 43, 41, 0.35);
}

/* Readiness bands (explain.py BAND_NAMES) → colour, same pattern as status below:
   defined once, consumed by the score hero, the run table and the list filters. */
:root {
  --band-agent-ready:      var(--ok);
  --band-largely-ready:    var(--ok);
  --band-partially-ready:  var(--warn);
  --band-needs-improvement: var(--warn);
  --band-not-agent-ready:  var(--err);
  --band-unscored:         var(--fg-3);  /* no journey ran: a state, not a grade */
  --band-unknown:          var(--fg-3);
}

/* Status → colour mapping, shared by badges, dots, rails and meters. */
:root {
  --st-pending-fg: var(--warn);  --st-pending-bg: var(--warn-soft);
  --st-queued-fg:  var(--info);  --st-queued-bg:  var(--info-soft);
  --st-running-fg: var(--accent); --st-running-bg: var(--accent-soft);
  --st-awaiting_input-fg: var(--warn); --st-awaiting_input-bg: var(--warn-soft);
  --st-success-fg: var(--ok);    --st-success-bg: var(--ok-soft);
  --st-answered-fg: var(--ok);   --st-answered-bg: var(--ok-soft);
  --st-failed-fg:  var(--err);   --st-failed-bg:  var(--err-soft);
  --st-error-fg:   var(--err);   --st-error-bg:   var(--err-soft);
  --st-timeout-fg: var(--warn);  --st-timeout-bg: var(--warn-soft);
  --st-cancelled-fg: var(--fg-3); --st-cancelled-bg: var(--surface-sunken);
  --st-unknown-fg: var(--fg-3);  --st-unknown-bg: var(--surface-sunken);
}