/* TOKENS: the only file in src/ allowed to hold a colour literal (gate: palette).
   PROVENANCE. Every hex below is a real pixel read from the brand files, never typed from taste.
   Method: Pillow + scikit-learn KMeans (random_state fixed) over opaque pixels, each cluster centre snapped to the
   nearest real pixel; (x,y) is that pixel in the source.
   LOGO-PNG  = brand/LOGO DEXEPIA PNG...png   (RGBA colortype 6, real alpha, black RGB under transparency)
   LOGO-JPG  = brand/LOGO DEXEPIA JPG.jpg.jpeg
   LOGO-OPQ  = brand/LOGO DEXEPIA PNG.png (opaque RGBA, alpha all 255, ground #0F0F0F)
   BANNER    = reference/SAMPUL DEXEPIA JPG.jpg.jpeg (1500x500)
   Everything else in the UI is a color-mix() of these tokens. */
:root {
  --green: #73FA70;        /* LOGO-PNG (1030,643), cluster share .426 of opaque px */
  --green-mid: #59AC50;    /* LOGO-JPG (1056,1213), anti-alias ramp of the D */
  --green-deep: #3A6537;   /* LOGO-JPG (1198,1307), shadow edge of the D */
  --lime: #2FF16E;         /* BANNER (611,212), tagline green */
  --cream: #F9F4E8;        /* LOGO-PNG (1066,901), the arrow */
  --cream-dim: #C7C5B9;    /* BANNER (684,209), secondary text */
  --grey: #A09F9A;         /* LOGO-JPG (717,1204), muted text */
  --umber: #65534F;        /* BANNER (1226,343), rules and borders only, never text */
  --bg: #0F0F0F;           /* LOGO-OPQ (0,0), page ground, 91 percent of the opaque logo */
  --bg-deep: #090804;      /* BANNER (441,1), deepest shade, 39.6 percent of the banner */
  --ember: #1C1209;        /* BANNER (325,127), warm shade */
  --slate: #293237;        /* BANNER (1288,100), cool shade */
  --flame: #E16108;        /* BANNER (481,481), fire, used for falling values */
  --amber: #F69827;        /* BANNER (460,365), fire highlight */

  /* derived, no new hues */
  --surface-1: color-mix(in srgb, var(--cream) 4%, var(--bg));
  --surface-2: color-mix(in srgb, var(--cream) 7%, var(--bg));
  --surface-3: color-mix(in srgb, var(--cream) 11%, var(--bg));
  --plate: linear-gradient(180deg, color-mix(in srgb, var(--cream) 9%, var(--bg)), color-mix(in srgb, var(--bg-deep) 70%, var(--bg)));
  --line: color-mix(in srgb, var(--cream) 8%, transparent);
  --line2: color-mix(in srgb, var(--cream) 15%, transparent);
  --line3: color-mix(in srgb, var(--cream) 26%, transparent);
  --glow: color-mix(in srgb, var(--green) 30%, transparent);
  --shade: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  --shade-hi: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  --sheen: color-mix(in srgb, var(--cream) 9%, transparent);
  --up: var(--green);
  --down: var(--flame);
  --depth: inset 0 1px 0 var(--sheen), inset 0 -1px 0 var(--shade), 0 .7rem 1.8rem var(--shade), 0 .1rem .3rem var(--shade);

  /* type stacks, as measured on the reference (system fonts only, no webfont request) */
  --f-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --f-disp: "HelveticaNeue-CondensedBlack", "Helvetica Neue Condensed Black", "Arial Narrow", Impact, "Helvetica Neue", sans-serif;

  /* motion, as measured on the reference */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.2, .9, .3, 1);
  --fast: .16s var(--ease);
  --slow: .26s var(--ease);
  --r: .5rem;
}