/* reror design tokens. The only file allowed to hold colour literals (docs/02). */

/* Cherry family (DECISIONS 139). No purple except the faint plum at the very top of the hero glow. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #180B11;
  --bg-deep: #11070C;
  --surface: #22111A;
  --surface-2: #2C1823;
  --line: #452A37;
  --line-strong: #603D4E;
  --glow-1: #33162F;
  --glow-2: #571A37;
  --glow-3: #682036;
  --glow-4: #431626;
  --wine: #7A2238;
  --on-wine: #F3E6EA;
  --accent: #BC3E61;
  --on-accent: #FFF4F6;
  --accent-hi: #A8304F;
  --accent-lo: #86283F;
  --on-accent-lo: #FFF4F6;
  --accent-ink: #EE9FB2;
  --accent-ink-hi: #F7C3D0;
  --text: #F3E6EA;
  --text-2: #BCA2AC;
  --text-3: #7D6470;
  --ok: #7FCBA6;
  --warn: #DDB466;
  --bad: #F2907A;

  /* Top band over --glow-reach (about one screen): a faint plum at the very top, a cherry peak,
     then an eased fall into the canvas. Stops follow a smoothstep curve, so the slope never
     changes in a step and no line shows where two stops meet (DECISIONS 152). */
  --hero-gradient: linear-gradient(180deg, #33162F 0%, #411931 5%, #5A1D34 11%, #682036 16%, #571B2E 24%, #471727 32%, #3A1421 41%, #30111C 49%, #270F18 57%, #200D15 65%, #1C0C13 74%, #190B11 82%, #180B11 90%);
  /* Closing band, rising from the bottom: deeper wine than the opening. */
  --end-gradient: linear-gradient(0deg, #2E1220 0%, #3A1525 5%, #521A2E 11%, #5E1D33 16%, #4D192B 25%, #3F1524 34%, #32121E 43%, #290F19 52%, #210D15 61%, #1C0C13 70%, #190B11 79%, #180B11 88%);
  --dot: #452A37;
  --halo-opacity: .4;
  --halo-opacity-focus: .58;
  --dot-opacity: .55;
  --dot-opacity-text: .3;
  --grain-opacity: .03;
  --glass: rgb(24 11 17 / .78);
  --glass-focus: rgb(24 11 17 / .72);
  --glass-line: rgb(243 230 234 / .2);
  --glass-line-focus: rgb(243 230 234 / .4);
  --wash: rgb(188 62 97 / .2);
  --wash-hover: rgb(188 62 97 / .3);
  --shadow-float: 0 8px 24px rgb(17 7 12 / .6), inset 0 0 0 1px var(--line);
  --scrim: rgb(17 7 12 / .7);
  /* QR plate: dark on light in both themes, so every reader scans it. */
  --qr-bg: #FFFFFF;
  --qr-fg: #180B11;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #FBF3F5;
  --bg-deep: #F5E8EC;
  --surface: #FFFFFF;
  --surface-2: #F4E5EA;
  --line: #E8D2DA;
  --line-strong: #CDA9B6;
  --glow-1: #EBC9DA;
  --glow-2: #F0CCD8;
  --glow-3: #F5DCE4;
  --glow-4: #F9ECF0;
  --wine: #8A1F3A;
  --on-wine: #FFFFFF;
  --accent: #A1294A;
  --on-accent: #FFFFFF;
  --accent-hi: #8A2140;
  --accent-lo: #6F1A31;
  --on-accent-lo: #FFFFFF;
  --accent-ink: #A1294A;
  --accent-ink-hi: #7E1D39;
  --text: #240E16;
  --text-2: #5C4049;
  --text-3: #9A7F89;
  --ok: #1F7048;
  --warn: #7A5410;
  --bad: #B4321E;

  /* Stronger than the first light band, so the glow reads on a bright screen (owner review). */
  --hero-gradient: linear-gradient(180deg, #EBC9DA 0%, #ECCBDB 11%, #EED0DE 22%, #F0D6E3 34%, #F3DEE8 45%, #F6E6EC 56%, #F8ECF1 68%, #FAF1F4 79%, #FBF3F5 90%);
  --end-gradient: linear-gradient(0deg, #EDCBD7 0%, #EECDD9 13%, #F0D3DD 25%, #F3DBE3 38%, #F5E3E9 50%, #F8EBEF 63%, #FAF1F3 75%, #FBF3F5 88%);
  --dot: #DDBFCB;
  --halo-opacity: .16;
  --halo-opacity-focus: .26;
  --dot-opacity: .6;
  --dot-opacity-text: .3;
  --grain-opacity: .025;
  --glass: rgb(255 255 255 / .78);
  --glass-focus: rgb(255 255 255 / .84);
  --glass-line: rgb(36 14 22 / .12);
  --glass-line-focus: rgb(36 14 22 / .24);
  --wash: rgb(161 41 74 / .12);
  --wash-hover: rgb(161 41 74 / .2);
  --shadow-float: 0 8px 24px rgb(36 14 22 / .14), inset 0 0 0 1px var(--line);
  --scrim: rgb(36 14 22 / .4);
  --qr-bg: #FFFFFF;
  --qr-fg: #180B11;
}

:root {
  --font-display: "Bitcount Single", ui-monospace, monospace;
  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-display: clamp(5rem, 25vw, 16rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  /* Hairline and dot-matrix spacing below the 4px step. */
  --s-px: 1px;
  --s-half: 2px;
  --dot-gap: 3px;
  --dot-gap-timer: 5px;
  --field-inset: 4%;
  --field-glass: 94%;

  --r-tag: 2px;
  --r-control: 4px;
  --r-panel: 6px;
  --r-pill: 999px;

  --d-press: 120ms;
  --d-hover: 180ms;
  --d-slide: 300ms;
  --d-enter: 320ms;
  --d-hero: 600ms;
  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  --ease-state: cubic-bezier(.4, 0, .2, 1);
  --ease-slide: cubic-bezier(.19, 1, .22, 1);
  --ease-goo: cubic-bezier(.34, 1.56, .64, 1);

  --glow-reach: max(100vh, 720px);
  --dot-grid: 12px;
  --dot-grid-small: 7px;
  --content-max: 1440px;
  --gutter: 24px;
  /* The bar and footer reach toward the screen edges on wide screens (DECISIONS 155). */
  --edge: clamp(var(--gutter), 3vw, 64px);
  --control-h: 44px;
  --hairline: inset 0 0 0 1px var(--line);
  --focus-ring: 2px solid var(--accent-ink);
  --focus-offset: 2px;
}

/* Bitcount Ink ships a rainbow palette. These keep it in the cherry family (DECISIONS 139: never
   rainbow, no purple), lighter on the dark canvas and darker on the light one. The font file itself
   is baked with the dark ramp by scripts/subset-fonts.py, so no browser ever shows the rainbow. */
@font-palette-values --ink-dark {
  font-family: "Bitcount Ink";
  base-palette: 0;
  override-colors:
    0 #BC3E61,
    1 #C9496E,
    2 #DD6E8C,
    3 #EE9FB2,
    4 #F7C3D0,
    5 #F3E6EA,
    6 #BC3E61AA,
    7 #C9496EAA,
    8 #DD6E8CAA,
    9 #EE9FB2AA,
    10 #F7C3D0AA,
    11 #F3E6EAAA,
    12 #F3E6EA,
    13 #BCA2AC,
    14 #BC3E6180,
    15 #C9496E80,
    16 #DD6E8C80,
    17 #EE9FB280,
    18 #F7C3D080,
    19 #F3E6EA80,
    20 #180B11,
    21 #C9496E,
    22 #DD6E8C,
    23 #EE9FB2,
    24 #F7C3D0,
    25 #F3E6EA,
    26 #BCA2AC,
    27 #BCA2AC,
    28 #BCA2AC;
}

@font-palette-values --ink-light {
  font-family: "Bitcount Ink";
  base-palette: 0;
  override-colors:
    0 #5A1428,
    1 #6F1A31,
    2 #8A2140,
    3 #A1294A,
    4 #BC3E61,
    5 #C9496E,
    6 #5A1428AA,
    7 #6F1A31AA,
    8 #8A2140AA,
    9 #A1294AAA,
    10 #BC3E61AA,
    11 #C9496EAA,
    12 #240E16,
    13 #5C4049,
    14 #5A142880,
    15 #6F1A3180,
    16 #8A214080,
    17 #A1294A80,
    18 #BC3E6180,
    19 #C9496E80,
    20 #FBF3F5,
    21 #6F1A31,
    22 #8A2140,
    23 #A1294A,
    24 #BC3E61,
    25 #240E16,
    26 #5C4049,
    27 #5C4049,
    28 #5C4049;
}