/* deadinternet.money / CHECKS CLEAR: design tokens.
   One primitive runs the whole system: the checkbox. Empty box = potential. Ticked green box = earned.
   Light is the clean room; dark is the same room after hours (warm banknote black, chalk ink, a green that still glows).
   Every colour, type, space, radius and motion value lives here. Components never hard-code a colour.

   Theme switching:
     :root                                         light (default)
     @media dark  :root:not([data-theme="light"])  dark, when the system is dark and the member has not picked light
     :root[data-theme="dark"]                      dark, the member's pick
   Any element can also carry data-theme="light|dark" to show one theme inside the other (the kit's both-themes strip). */

:root,
[data-theme="light"]{
  color-scheme:light;
  /* roles (PRINCIPLES §7) */
  --bg:#FFFFFF;             /* the room */
  --surface:#F4F5F2;        /* raised, rarely */
  --line:#E2E5DF;           /* hairlines */
  --ink:#0B0D0B;            /* text and numbers */
  --muted:#5F665E;          /* second voice, 5.9:1 on bg */
  --accent:#00A846;         /* earned. money. live. */
  --accent-hover:#00B44B;
  --accent-ink:#0B0D0B;     /* text and ticks on green, 6.5:1 */
  --hot:#D9FF3F;            /* the highlighter: peaks and celebrations only */
  --hot-ink:#0B0D0B;
  --danger:#D3263A;         /* the red pen: errors only */
  /* the checkbox */
  --box:#FFFFFF;            /* inside of an empty checkbox */
  --cb-box:#FFFFFF;         /* inside of the empty box on a green check-button */
  --cb-tick:var(--accent);  /* a tick inside that box */
  --sheet:#FFFFFF;          /* layers */
  --veil:rgba(255,255,255,.8);
  --money-zero:#8C948A;     /* $0.00 is grey: green is earned */
  --on-accent-line:rgba(11,13,11,.24);
  --ink-rgb:11,13,11;
  --theme-color:#FFFFFF;
  /* imagery */
  --hero:url(/assets/cc/img/hero.jpg); --drops:url(/assets/cc/img/drops.jpg); --hero-f:none;
  /* the Stream's canvas reads these at draw time */
  --cv-box-a:.9; --cv-glow:rgba(0,196,86,.85); --cv-glow-k:1.75; --cv-halo-k:1.3; --cv-bloom:0; --cv-refl:.34;
  --cv-horizon-a:.18; --cv-ghost-a:.1; --cv-blend:source-over; --cv-sweep:var(--hot);
}

/* the room after hours: designed, not inverted */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#12110E; --surface:#1B1A16; --line:#2E2B25; --ink:#ECE8DE; --muted:#9C968A;
    --accent:#2FBF74; --accent-hover:#3DCB81; --accent-ink:#06140C; --hot:#C6E23F; --hot-ink:#0B0D0B; --danger:#FF5C6B;
    --box:#12110E; --cb-box:transparent; --cb-tick:var(--accent-ink); --sheet:#171612; --veil:rgba(10,9,7,.8);
    --money-zero:#6E695F; --on-accent-line:rgba(6,20,12,.3); --ink-rgb:236,232,222; --theme-color:#12110E;
    --hero:url(/assets/cc/img/hero-dark.jpg); --drops:url(/assets/cc/img/drops-dark.jpg); --hero-f:sepia(.18) contrast(.9) brightness(1.08);
    --cv-box-a:.45; --cv-glow:rgba(84,236,156,1); --cv-glow-k:1.9; --cv-halo-k:1.5; --cv-bloom:1.8; --cv-refl:.34;
    --cv-horizon-a:.22; --cv-ghost-a:.115; --cv-blend:lighten; --cv-sweep:#B4F2CF;
  }
}
:root[data-theme="dark"],
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12110E; --surface:#1B1A16; --line:#2E2B25; --ink:#ECE8DE; --muted:#9C968A;
  --accent:#2FBF74; --accent-hover:#3DCB81; --accent-ink:#06140C; --hot:#C6E23F; --hot-ink:#0B0D0B; --danger:#FF5C6B;
  --box:#12110E; --cb-box:transparent; --cb-tick:var(--accent-ink); --sheet:#171612; --veil:rgba(10,9,7,.8);
  --money-zero:#6E695F; --on-accent-line:rgba(6,20,12,.3); --ink-rgb:236,232,222; --theme-color:#12110E;
  --hero:url(/assets/cc/img/hero-dark.jpg); --drops:url(/assets/cc/img/drops-dark.jpg); --hero-f:sepia(.18) contrast(.9) brightness(1.08);
  --cv-box-a:.45; --cv-glow:rgba(84,236,156,1); --cv-glow-k:1.9; --cv-halo-k:1.5; --cv-bloom:1.8; --cv-refl:.34;
  --cv-horizon-a:.22; --cv-ghost-a:.115; --cv-blend:lighten; --cv-sweep:#B4F2CF;
}

/* derived ink tints: declared wherever a theme is declared, so they follow the scope's --ink-rgb */
:root,[data-theme]{
  --ink-08:rgba(var(--ink-rgb),.08); --ink-12:rgba(var(--ink-rgb),.12); --ink-16:rgba(var(--ink-rgb),.16);
  --ink-35:rgba(var(--ink-rgb),.35); --ink-50:rgba(var(--ink-rgb),.5);
}

:root{
  /* type: three faces (display for money and marks, UI, mono for links/codes/changing numbers) */
  --f-display:'Special Gothic Expanded One','Public Sans',system-ui,sans-serif;
  --f-ui:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Fragment Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-28:28px; --t-40:40px; --t-64:64px; --t-96:96px; --t-128:128px;
  --lh-display:1.05; --lh-ui:1.45;
  --track-caps:.06em;          /* uppercase labels only */

  /* space: 4 px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --pad:48px;                  /* the page's side gutter (16 px on phones) */

  /* radius: square cells; 2 px only on controls */
  --r-0:0; --r-ctl:2px;

  /* lines */
  --hair:1px; --stroke:1.5px; --stroke-b:2px;

  /* motion (PRINCIPLES §5) */
  --e-in:cubic-bezier(.2,.8,.2,1);      /* entrances: fast out, soft land */
  --e-out:cubic-bezier(.4,0,1,1);       /* exits */
  --e-breath:cubic-bezier(.4,0,.2,1);   /* ambient breathing, theme changes */
  --spring:linear(0,.22 7%,.6 15%,.92 25%,1.06 34%,1.08 40%,1.04 52%,.995 66%,1);
  --d-micro:120ms; --d-press:90ms; --d-std:220ms; --d-layer:260ms; --d-emph:420ms; --d-roll:480ms; --d-cel:1500ms;
  --d-breath:4400ms;           /* the idle heartbeat period */

  /* sizes */
  --tap:48px;                  /* primary target, desktop */
  --tap-xl:56px;               /* primary target, phones and hero actions */
  --bar-h:76px;                /* the shell's top bar */
  --dock-h:64px;               /* the dock's own height */
  --dock-clear:112px;          /* room a view leaves under its content for the floating dock (desktop) */
  --safe-b:env(safe-area-inset-bottom,0px);
  --band:560px;                /* the Stream band's max height on desktop */

  /* layers */
  --z-view:1; --z-bar:5; --z-dock:40; --z-veil:60; --z-sheet:61; --z-toast:70; --z-fx:80; --z-pal:90;
}
@media (max-width:819px){
  :root{
    --pad:16px; --tap:56px; --bar-h:60px; --dock-h:62px;
    --dock-clear:calc(var(--dock-h) + var(--safe-b) + 16px);
    --band:clamp(168px,36vh,340px);
  }
}