/* ═══ tokens ═══════════════════════════════════════════════════════════════
   Every colour, radius, easing and duration in the product. Nothing below this
   file invents a value.

   The reason this is one file rather than a section at the top of a stylesheet:
   the moment two files each define their own "slightly darker grey", the
   product has two greys and neither is wrong enough to fix. A token file is
   only useful if it is the ONLY source, so a hex code appearing anywhere in
   styles/ or sections/ is a bug — and there is a test that fails on one.

   ── WHERE THESE COLOURS COME FROM ─────────────────────────────────────────
   TaskFlow's own palette, taken from the one place it was written down: the
   digest email templates in `taskflow/app/services/digest_service.py`. Indigo
   #4f46e5 on slate, with #eef2ff as the wash and #0f172a / #334155 / #64748b as
   the three ink weights.

   Adopting it rather than inventing a third scheme is the point of merging the
   two products. A firm that used TaskFlow and now uses HR Catalyst should recognise
   the thing they are looking at, and "the payroll module looks like a different
   company built it" is a real cost that no amount of feature work pays back.

   The earlier scheme was warm neutrals with a mid blue. It was fine and it was
   nobody's. This one is somebody's.

   Slate rather than pure grey matters more than it sounds: a grey with a hint
   of blue in it reads as considered, and on the screens people stare at all day
   — tables of numbers — it keeps the whites from looking fluorescent.

   One accent, still. A B2B shell that colours six things has six things
   competing to be looked at, and the answer to "which matters most?" becomes
   "none of them".                                                            */

:root{
  /* surfaces, back to front.
     The plane is tinted and the surface is pure white, so a card lifts off the
     page without needing a shadow to say so.

     The plane went a step deeper this session. At #f8fafc the gap between the
     page and a card was about one percent of luminance — on a laptop at an
     angle, in a lit office, that is no gap at all, and the product read as one
     flat sheet with hairlines drawn on it. "The UI is too dull" is mostly what
     a page with no depth looks like. */
  --plane:#edf0f9;      /* the page behind everything */
  --surface:#ffffff;    /* cards, the bar */
  --raised:#ffffff;     /* menus, dialogs, inputs */
  --sunk:#e4e9f2;       /* table heads, and anything that is chrome not content */

  /* ink, in three weights. Three is enough: primary, secondary, and the one for
     text that must be present but must not be read first. */
  --ink:#0f172a;
  --ink-2:#334155;
  --ink-3:#64748b;
  --ink-4:#94a3b8;      /* placeholders and disabled only — never body text */

  --line:#e2e8f0;
  --line-2:#f1f5f9;

  --accent:#4f46e5;
  --accent-ink:#4338ca;
  --accent-wash:#eef2ff;
  /* Text and controls that sit ON the accent. Stays light in dark mode too —
     indigo is a mid tone in both, so this is not a theme-flipping colour and
     treating it as one produces dark text on a dark button. */
  --on-accent:#ffffff;
  --knob:#ffffff;

  /* Status colours are NOT decoration. Anything wearing --critical is something
     a person has to do; anything wearing --good is a thing they can stop
     thinking about. Used for emphasis they stop meaning that. */
  /* ── the colour extension ─────────────────────────────────────────────
     Added when the product was told, fairly, that it was grey on grey. The
     one-accent rule above still holds for CONTROLS — buttons, links, focus —
     but identity colour is allowed back in three places where it carries
     meaning rather than competing for it: informational pills, the salary
     breakdown chips, and the tinted crown of the page. Three hues, each with
     a wash, none of them shouting. */
  --info:#0369a1;
  --info-wash:#e0f2fe;
  --violet:#7c3aed;
  --violet-wash:#f5f3ff;
  /* The page's tinted crown: a soft indigo glow behind the header that fades
     into the plane. Depth without a border. */
  --plane-glow:#e0e5fb;

  /* ── the bar, in TaskFlow's deep rendition ────────────────────────────────
     The palette was already TaskFlow's (see the header); what changed here is
     the RENDITION: the top bar goes to the deep end of the same indigo-slate
     family instead of translucent white. One constant, confident band of
     brand across the top — it does not flip with the theme, for the same
     reason the sign-in brand panel does not: chrome that changes colour with
     the weather is chrome nobody recognises. Everything inside the bar wears
     bar ink, never page ink. */
  --bar-bg:#141a30;
  --bar-ink:#eef1fb;
  --bar-ink-2:#b6bedf;
  --bar-ink-3:#7d87b4;
  --bar-line:#232b4d;
  --bar-wash:rgba(129,140,248,.17);   /* hover/open pill on the dark bar */
  --bar-active-ink:#c7d2fe;           /* the current item's text */
  --bar-underline:#818cf8;            /* the current item's underline */

  --good:#059669;
  --good-wash:#ecfdf5;
  --critical:#dc2626;
  --critical-wash:#fef2f2;
  --warn:#d97706;
  --warn-wash:#fffbeb;

  /* The brand surface — the panel beside the sign-in form, and nothing else.
     Deep indigo through to the accent, with two lights over the top. It does
     NOT flip in dark mode: a brand panel that changes colour with the system
     theme is a brand that does not have a colour. */
  --brand-1:#312e81;    /* indigo-900, the deep corner */
  --brand-2:#4338ca;    /* indigo-700, the middle */
  --brand-3:#4f46e5;    /* indigo-600, meeting the accent */
  --brand-light:#818cf8; /* indigo-400, the top-left glow */
  --brand-cool:#38bdf8;  /* sky-400, one cool note bottom-right */
  --on-brand:#ffffff;

  /* Paper — for print previews (the payslip canvas). A printed page is white
     in every theme, so these NEVER flip in dark mode; the ink chosen for
     paper (the company's accent) was chosen against white. */
  --paper:#ffffff;
  --paper-ink:#111827;
  --paper-ink-2:#4b5563;
  --paper-ink-3:#9ca3af;
  --paper-line:#e5e7eb;
  --paper-sunk:#f3f4f6;

  --nav-h:56px;
  --r:16px;
  --r-sm:10px;
  /* Cards carry a real shadow now rather than relying on a hairline. A border
     alone says "there is an edge here"; a shadow says "this is nearer than the
     page", and the second is what makes a screen of cards scannable. */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.07);
  --shadow-lg:0 4px 12px rgba(15,23,42,.07), 0 20px 48px rgba(15,23,42,.14);
  --ring:0 0 0 3px rgba(79,70,229,.2);

  /* One easing curve for the whole product. Motion that uses three curves reads
     as three different applications. */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:.18s;
  --mid:.26s;
  --slow:.38s;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;

  font-synthesis-weight:none;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Built from the same slate family rather than inverted. An inverted light
       theme has the wrong contrast everywhere: what was a hairline becomes a
       glare and what was body text becomes a whisper. */
    --plane:#0b1120;
    --surface:#111a2e;
    --raised:#1a2438;
    --sunk:#0f1728;

    --ink:#f1f5f9;
    --ink-2:#cbd5e1;
    --ink-3:#94a3b8;
    --ink-4:#64748b;

    --line:#243149;
    --line-2:#1a2438;

    /* Indigo-500 rather than 600: the darker one disappears into a dark plane. */
    --accent:#6366f1;
    --accent-ink:#a5b4fc;
    --accent-wash:#1e1b4b;

    --info:#7dd3fc;
    --info-wash:#0b3a55;
    --violet:#c4b5fd;
    --violet-wash:#2e1065;
    --plane-glow:#131b3a;

    /* The bar stays the SAME deep band in dark mode — one shade deeper than
       the dark plane so it still reads as chrome, not content. */
    --bar-bg:#0d1226;
    --bar-line:#1c2444;

    --good:#34d399;
    --good-wash:#052e23;
    --critical:#f87171;
    --critical-wash:#3b1214;
    --warn:#fbbf24;
    --warn-wash:#3a2708;

    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.5);
    --shadow-lg:0 4px 12px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.65);
    --ring:0 0 0 3px rgba(99,102,241,.28);
  }
}