/* ============================================================================
   tokens.css — the design system.

   Thesis: the interface is monochrome. Colour appears only where it carries
   meaning — a funnel stage, money, a status, a chart series. If something on
   this page is coloured, it means something. That is the whole rule, and it is
   also why the app reads calm at a glance: the eye goes straight to the only
   coloured thing on screen.

   Type has two roles. The interface speaks in sans; the data speaks in mono.
   Every figure, rate, currency amount and timestamp is set in the mono face
   with tabular figures, so columns align and digits never shimmy between
   renders. Both stacks are native to the OS — a deliberate choice, not a
   webfont fallback: a tool that is open all day should render in the face the
   viewer's system already hints and subpixel-renders best.

   Every colour below is defined at :root and overridden token-for-token in the
   two dark scopes. No component may declare a raw colour.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- Neutrals. Cool-biased, never a pure grey: each step carries a few
        degrees of blue so the greys sit with the data blue rather than fighting
        it. ------------------------------------------------------------------ */
  --bg:            #f7f8fa;
  --surface:       #ffffff;
  --surface-2:     #f3f4f7;
  --surface-3:     #eceef2;
  --border:        #e4e6ec;
  --border-strong: #cfd3dc;

  --ink:    #14161b;
  --ink-2:  #565c69;
  --ink-3:  #878e9d;
  --ink-on: #ffffff;          /* text on an ink-filled surface */

  /* -- Interactive. Primary action is ink, not a hue — the accent slot is
        spent on data instead. Focus is the one place blue touches chrome. --- */
  --action:       #14161b;
  --action-hover: #2b2f38;
  --focus:        #2a78d6;

  /* -- Data. Validated with the data-viz palette validator against #ffffff
        (light) and #131518 (dark). Do not substitute by eye. ---------------- */
  --series-1: #2a78d6;        /* revenue, primary series */
  --series-2: #b06f00;        /* cash collected, money    */

  /* Funnel is ordinal — one hue, monotone lightness, the ramp IS the order.
     Recessive at the top of the funnel, most saturated at the close. */
  --stage-1: #86b6ef;
  --stage-2: #5598e7;
  --stage-3: #2a78d6;
  --stage-4: #1c5cab;
  --stage-5: #0d366b;

  /* -- Status. Reserved meanings; never reused as a series colour. ---------- */
  --good:     #14714f;
  --good-bg:  #e6f4ee;
  --warn:     #8a5600;        /* the 24h overdue nudge lives here */
  --warn-bg:  #fdf1dc;
  /* An open task. Blue, not amber: amber already means "this one is late", and
     a queue where every row is amber has no way left to shout. */
  --todo:     #2a78d6;
  --bad:      #b23122;
  --bad-bg:   #fdeceb;

  /* Distance from goal, in four named bands. Two greens differ only in
     lightness because both mean "fine"; amber and crimson are far enough apart
     to survive deuteranopia, which plain orange-vs-red is not. */
  --grade-on:    #14714f;
  --grade-near:  #3f9068;
  --grade-under: #a8700a;
  --grade-bad:   #96223d;
  --grade-none:  #878e9d;
  --info-bg:  #eaf1fc;

  /* -- Elevation. Two levels only; both barely there. ----------------------- */
  --shadow-1: 0 1px 2px rgba(20, 22, 27, .06);
  --shadow-2: 0 8px 28px -6px rgba(20, 22, 27, .16), 0 2px 6px rgba(20, 22, 27, .05);

  /* -- Geometry. Sharp: 6px is the ceiling for anything data-bearing. ------- */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;
  --rail: 232px;

  /* -- Type ---------------------------------------------------------------- */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', 'Roboto Mono', monospace;

  --t-xs:  11px;
  --t-sm:  12px;
  --t-md:  13px;
  --t-lg:  15px;
  --t-xl:  20px;
  --t-2xl: 28px;
  --t-3xl: 38px;

  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* Dark tokens are declared twice on purpose: the media query covers the OS
   setting for viewers who never picked a theme, the [data-theme] scope covers
   an explicit choice and must win in both directions. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --bg:            #0b0c0e;
    --surface:       #131518;
    --surface-2:     #191c21;
    --surface-3:     #22262c;
    --border:        #24272d;
    --border-strong: #363b43;

    --ink:    #eef0f3;
    --ink-2:  #9aa1ad;
    --ink-3:  #6b7280;
    --ink-on: #0b0c0e;

    --action:       #eef0f3;
    --action-hover: #ffffff;
    --focus:        #3987e5;

    --series-1: #3987e5;
    --series-2: #c98500;

    --stage-1: #b7d3f6;
    --stage-2: #86b6ef;
    --stage-3: #5598e7;
    --stage-4: #2a78d6;
    --stage-5: #184f95;

    --good:     #35b183;
    --good-bg:  #10261e;
    --warn:     #e0a030;
    --warn-bg:  #2a1f0c;
    --todo:     #5598e7;
    --bad:      #f0705a;
    --bad-bg:   #2b1512;

    --grade-on:    #35b183;
    --grade-near:  #6cc79a;
    --grade-under: #dda12b;
    --grade-bad:   #ee6d92;
    --grade-none:  #6b7280;
    --info-bg:  #121c2b;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 10px 34px -8px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0b0c0e;
  --surface:       #131518;
  --surface-2:     #191c21;
  --surface-3:     #22262c;
  --border:        #24272d;
  --border-strong: #363b43;

  --ink:    #eef0f3;
  --ink-2:  #9aa1ad;
  --ink-3:  #6b7280;
  --ink-on: #0b0c0e;

  --action:       #eef0f3;
  --action-hover: #ffffff;
  --focus:        #3987e5;

  --series-1: #3987e5;
  --series-2: #c98500;

  --stage-1: #b7d3f6;
  --stage-2: #86b6ef;
  --stage-3: #5598e7;
  --stage-4: #2a78d6;
  --stage-5: #184f95;

  --good:     #35b183;
  --good-bg:  #10261e;
  --warn:     #e0a030;
  --warn-bg:  #2a1f0c;
  --todo:     #5598e7;
  --bad:      #f0705a;
  --bad-bg:   #2b1512;

  --grade-on:    #35b183;
  --grade-near:  #6cc79a;
  --grade-under: #dda12b;
  --grade-bad:   #ee6d92;
  --grade-none:  #6b7280;
  --info-bg:  #121c2b;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 34px -8px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
}