/* ============================================================================
   DFY design tokens — the single source of truth for every DFY surface.

   Direction: DARK EDITORIAL, chosen 2026-09-22.
   Neutral near-black ground, oxblood, serif for reading, square corners,
   left-stripe rules in place of cards, and density rather than air.

   Consumers:
     1. discoveritlegal.com   <link rel="stylesheet" href="/assets/tokens.css">
     2. DFYAI (Svelte/Flowbite/Tailwind v4)   import this, then dfy-tailwind.css
     3. DFYCollect (Avalonia)   Theme.axaml is regenerated from this BY HAND

   ---------------------------------------------------------------------------
   WHY LIGHT IS THE :root DEFAULT WHEN THE BRAND IS DARK

   The token file follows the ordinary convention — light in :root, dark under
   prefers-color-scheme — so that reference material stays readable however a
   reader has set their machine up. The *brand* is expressed by the marketing
   pages opting in explicitly:

       <html lang="en" data-theme="dark">

   The site is dark because it chooses to be. The documentation respects the
   reader. Both come out of one file, and the docs re-skin without inverting
   their existing structure.
   ---------------------------------------------------------------------------

   ARGB WARNING, for whoever ports these to Avalonia:
   CSS is #RRGGBBAA. Avalonia is #AARRGGBB. The alpha moves. Every token with
   transparency is written in BOTH forms, because getting this wrong produces a
   colour that is plausible rather than obviously broken, and it will survive
   review.

   Contrast: every text/background pair below meets WCAG AA (4.5:1) in both
   modes. Verified, not assumed — re-check with tools/contrast.js after any
   change to ink, muted, accent, action or the grounds.
   ============================================================================ */

:root {
  /* ---- Ground and surfaces ------------------------------------------------ */
  --dfy-ground:         #FAF9F7;   /* warm paper, not blue-white */
  --dfy-panel:          #FFFFFF;
  --dfy-surface-raised: #FFFFFF;
  --dfy-rule:           #E2DFDA;

  /* ---- Ink ---------------------------------------------------------------- */
  --dfy-ink:            #16181C;   /* 16.9:1 on ground */
  --dfy-muted:          #5C6470;   /*  5.7:1 on ground */

  /* ---- Brand accent: links, eyebrows, rules. A READING colour. ------------ */
  --dfy-accent:         #7A2430;   /*  9.4:1 on ground */
  --dfy-accent-soft:    #F3E7E7;

  /* ---- Action: primary buttons only. ---------------------------------------
         On a light ground the oxblood is already a strong affordance, so
         action and accent coincide here. They do NOT in dark mode — see below.
         That divergence is the reason these are two tokens. */
  --dfy-action:         #7A2430;
  --dfy-action-ink:     #FFFFFF;   /*  9.9:1 on action */

  /* ---- Semantic ----------------------------------------------------------- */
  --dfy-warn:           #8A4A16;
  --dfy-warn-soft:      #F7EDE2;
  --dfy-error:          #A31D1D;
  --dfy-ok:             #2C6350;

  /* ---- The wave sweeps the DFYCollect app paints behind its window --------- */
  --dfy-wave-high:      #7A24301A;  /* avalonia #1A7A2430 — DFYCollectWaveHighBrush */
  --dfy-wave-low:       #5C647012;  /* avalonia #125C6470 — DFYCollectWaveLowBrush  */
  --dfy-wave-deep:      #16181C14;  /* avalonia #1416181C — DFYCollectWaveDeepBrush */

  /* ---- Categorical, for charts and graph canvases -------------------------
         Six hues at one lightness and chroma, so no series looks louder than
         another. Evenly spaced from the brand oxblood at 16 deg, so a graph
         still sits inside the family. All six clear AA on both grounds.
         These encode DATA, not brand. Do not use them for UI. */
  --dfy-data-1: #963541;
  --dfy-data-2: #894800;
  --dfy-data-3: #1C6D26;
  --dfy-data-4: #006F72;
  --dfy-data-5: #125CA1;
  --dfy-data-6: #714290;

  /* ---- Type --------------------------------------------------------------- */
  --dfy-font-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dfy-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --dfy-font-mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Reading is set in the serif. Labels, buttons, eyebrows and data are sans
     or mono. This is the single most distinguishing choice in the direction —
     almost nothing else in this market sets body copy in a serif. */
  --dfy-font-body:  var(--dfy-font-serif);
  --dfy-font-head:  var(--dfy-font-serif);
  --dfy-font-ui:    var(--dfy-font-sans);

  /* ---- Geometry ----------------------------------------------------------- */
  --dfy-radius:       2px;   /* square-ish. The direction does not do pills. */
  --dfy-radius-tight: 0;
  --dfy-stripe:       3px;   /* the left-edge rule that replaces a card border */
  --dfy-measure:      66ch;
}

/* ---------------------------------------------------------------------------
   DARK — the brand's native mode.
   Automatic for readers who prefer it, unless a page has opted out.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --dfy-ground:         #14161A;
    --dfy-panel:          #1B1E23;
    --dfy-surface-raised: #1B1E23;
    --dfy-rule:           #2A2F36;

    --dfy-ink:            #E9ECF1;  /* 15.3:1 on ground */
    --dfy-muted:          #98A2AE;  /*  7.0:1 on ground */

    --dfy-accent:         #C98A90;  /*  6.5:1 on ground */
    --dfy-accent-soft:    #2A1E20;

    /* Deliberately desaturated from the action crimson. A full-chroma red at
       reading size on near-black glares; the rose does not. Same hue family
       (13 deg against 18 deg), roughly half the chroma. */

    --dfy-action:         #B23A48;  /* white on it: 5.9:1 */
    --dfy-action-ink:     #FFFFFF;

    --dfy-warn:           #E0A466;
    --dfy-warn-soft:      #2A2018;
    --dfy-error:          #E8787E;
    --dfy-ok:             #7FBFA4;

    --dfy-data-1: #F19298;
    --dfy-data-2: #E1A35C;
    --dfy-data-3: #81C583;
    --dfy-data-4: #3DC7C9;
    --dfy-data-5: #79B5F8;
    --dfy-data-6: #C79CE8;

    --dfy-wave-high:      #C98A901A;  /* avalonia #1AC98A90 */
    --dfy-wave-low:       #98A2AE12;  /* avalonia #1298A2AE */
    --dfy-wave-deep:      #0A0B0D40;  /* avalonia #400A0B0D */
  }
}

/* Dark, forced.
   THREE selectors, not one. Tailwind and Flowbite switch dark mode with a
   `.dark` class on the root element; these tokens originally switched only on
   data-theme. A consumer toggling the class alone therefore got light
   components over dark token colours — a half-switched UI, and not their bug
   to fix. Both spellings work now, and either may be used alone. */
:root[data-theme="dark"],
:root.dark,
.dark {
  --dfy-ground:         #14161A;
  --dfy-panel:          #1B1E23;
  --dfy-surface-raised: #1B1E23;
  --dfy-rule:           #2A2F36;

  --dfy-ink:            #E9ECF1;
  --dfy-muted:          #98A2AE;

  --dfy-accent:         #C98A90;
  --dfy-accent-soft:    #2A1E20;

  --dfy-action:         #B23A48;
  --dfy-action-ink:     #FFFFFF;

  --dfy-warn:           #E0A466;
  --dfy-warn-soft:      #2A2018;
  --dfy-error:          #E8787E;
  --dfy-ok:             #7FBFA4;

  --dfy-data-1: #F19298;
  --dfy-data-2: #E1A35C;
  --dfy-data-3: #81C583;
  --dfy-data-4: #3DC7C9;
  --dfy-data-5: #79B5F8;
  --dfy-data-6: #C79CE8;

  --dfy-wave-high:      #C98A901A;  /* avalonia #1AC98A90 */
  --dfy-wave-low:       #98A2AE12;  /* avalonia #1298A2AE */
  --dfy-wave-deep:      #0A0B0D40;  /* avalonia #400A0B0D */
}

/* Paper is paper. A dark page printed costs a cartridge and reads worse. */
@media print {
  :root {
    --dfy-ground:      #FFFFFF;
    --dfy-panel:       #FFFFFF;
    --dfy-rule:        #C9CFD7;
    --dfy-ink:         #15181D;
    --dfy-muted:       #4A535F;
    --dfy-accent:      #6E202B;
    --dfy-accent-soft: #F2E9EA;
    --dfy-warn:        #8F3818;
    --dfy-ok:          #23523F;
  }
}

/* ============================================================================
   RAMPS

   Tailwind cannot generate utilities from a single value, and Flowbite selects
   colours by name (<Button color="primary">). So the scalars above get ramps.

   GENERATED, not hand-picked:
       node tools/ramp.js primary "#B23A48" secondary "#7A2430" gray "#98A2AE"

   Steps are evenly spaced in OKLCH lightness, so each is the same visual
   distance from the next, and the step nearest a source colour's own lightness
   is pinned to it exactly. Re-run the tool if a source changes; do not edit a
   step by hand, or the ramp stops being a ramp.

   NOTE — the dark accent #C98A90 is NOT a step of any ramp here, and should
   not be made one. It is the brand oxblood deliberately desaturated for
   reading on near-black. Ramps regularise chroma; that colour exists because
   it breaks the regular curve on purpose.

   gray is included deliberately. Flowbite leans on text-gray-900 / dark:text-
   gray-400 throughout, and Tailwind's stock gray is a cool blue-grey that will
   sit a few degrees off everything else in the family.
   ============================================================================ */

:root {
  /* primary — the action crimson. From #B23A48, pinned at 600. */
  --dfy-primary-50:  #FFEEEE;
  --dfy-primary-100: #FFDEDE;
  --dfy-primary-200: #FFC4C5;
  --dfy-primary-300: #FFA9AC;
  --dfy-primary-400: #F8858C;
  --dfy-primary-500: #D95D68;
  --dfy-primary-600: #B23A48;
  --dfy-primary-700: #A13541;
  --dfy-primary-800: #842A34;
  --dfy-primary-900: #70232C;
  --dfy-primary-950: #4A141A;

  /* secondary — the brand oxblood. From #7A2430, pinned at 900. */
  --dfy-secondary-50:  #FFEEEE;
  --dfy-secondary-100: #FFDDDE;
  --dfy-secondary-200: #FFC2C5;
  --dfy-secondary-300: #FFA5AB;
  --dfy-secondary-400: #FE808B;
  --dfy-secondary-500: #DF5766;
  --dfy-secondary-600: #C33D50;
  --dfy-secondary-700: #A62D40;
  --dfy-secondary-800: #892333;
  --dfy-secondary-900: #7A2430;
  --dfy-secondary-950: #4C111A;

  /* gray — a whisper of cool, so near-black does not read as dead.
     From #98A2AE, pinned at 400. */
  --dfy-gray-50:  #F3F6F8;
  --dfy-gray-100: #E7EAEE;
  --dfy-gray-200: #D4DAE1;
  --dfy-gray-300: #BFC8D2;
  --dfy-gray-400: #98A2AE;
  --dfy-gray-500: #828C99;
  --dfy-gray-600: #6B7582;
  --dfy-gray-700: #58616C;
  --dfy-gray-800: #474F58;
  --dfy-gray-900: #3C434B;
  --dfy-gray-950: #252A30;
}