/*
 * YesDesk design tokens — "Ledger"
 * -------------------------------------------------------------------------
 * SINGLE SOURCE OF TRUTH. This file is authored here and copied verbatim to
 * FrontDesk at app/static/css/tokens.css. Do not edit either copy in isolation.
 *
 * Colors are stored as space-separated RGB channels, not hex, so that Tailwind
 * opacity modifiers (bg-paper/50) and raw rgb(... / .5) both work off the same
 * variable. Read them as rgb(var(--paper) / <alpha>).
 *
 * :root is light. Dark is a peer theme, not an afterthought — it is reached by
 * [data-theme="dark"] (explicit choice) or prefers-color-scheme (system).
 */

:root {
  /* Surfaces — deliberately low chroma. Not cream: cream reads yellow on a
     cheap panel in daylight, which is exactly where this product gets used. */
  --paper: 246 245 242;
  --paper-sunk: 239 237 232;
  --sheet: 255 255 255;
  --line: 227 225 219;
  --line-strong: 201 198 190;

  /* Ink — --ink-3 is the contrast FLOOR for real text (4.9:1). There is no
     fourth gray. --ink-off is for placeholders and disabled only, never for
     information a user has to read. */
  --ink: 23 25 28;
  --ink-2: 74 80 87;
  --ink-3: 103 110 118;
  --ink-off: 154 160 166;
  --ink-invert: 255 255 255;

  /* Brand — one color, rationed. Target: no more than three appearances of
     --yes on a single screen. It is a solid fill or a 2px rule, never a glow. */
  --yes: 12 79 60;
  --yes-hover: 9 61 46;
  --yes-line: 14 107 76;
  --yes-tint: 230 240 235;

  /* The one saturated color in the system, reserved for "happening right now".
     If it is on screen, something is live. Non-text use only — --live-ink for
     any actual text. */
  --live: 192 82 28;
  --live-ink: 148 56 15;

  /* State. Nothing outside this block is allowed to be colored. */
  --ok: 14 107 76;
  --ok-tint: 230 240 235;
  --attn: 138 82 0;
  --attn-tint: 247 238 220;
  --urgent: 163 44 30;
  --urgent-tint: 249 233 229;
  --info: 34 84 138;
  --info-tint: 233 240 248;

  /* Radius. 999px is permitted on exactly two things: avatars and the 8px live
     dot. Everything else is one of these three. */
  --r-control: 6px;
  --r-surface: 10px;
  --r-sheet: 16px;

  /* Elevation is PERMISSION, in two states, not a decorative ramp.
     --elev-0 = read-only (border only). --elev-1 = you may press this. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgb(20 22 25 / 0.05), 0 2px 6px -2px rgb(20 22 25 / 0.06);
  --elev-pop: 0 12px 32px -16px rgb(20 22 25 / 0.28), 0 2px 6px -2px rgb(20 22 25 / 0.1);

  /* Motion. Fires when data changed or to show where something came from.
     Never on scroll. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --t-press: 90ms;
  --t-1: 120ms;
  --t-2: 200ms;
  --t-3: 320ms;
  --t-fresh: 1200ms;
}

/*
 * .band-invert — a section that renders in the OPPOSITE theme to the page.
 *
 * This is the page's rhythm device: one band mid-page flips, which breaks a
 * long scroll of same-shaped sections without introducing any new design
 * language. It re-declares tokens on the element rather than :root, so it
 * works scoped to a <section>.
 *
 * On a light page it goes dark (below). On a dark page it goes light (further
 * down, inside each dark scope), so the contrast survives in both themes.
 */
.band-invert {
  --paper: 18 20 22;
  --paper-sunk: 12 14 15;
  --sheet: 26 29 31;
  --line: 42 47 50;
  --line-strong: 60 67 72;
  --ink: 236 238 239;
  --ink-2: 175 182 185;
  --ink-3: 138 146 150;
  --ink-off: 110 118 122;
  --ink-invert: 7 20 16;
  --yes: 53 165 126;
  --yes-hover: 43 141 107;
  --yes-line: 94 208 166;
  --yes-tint: 18 38 31;
  --live: 225 131 78;
  --live-ink: 240 163 117;
  --ok: 94 208 166;
  --ok-tint: 18 38 31;
  --attn: 240 179 87;
  --attn-tint: 42 32 16;
  --urgent: 255 138 122;
  --urgent-tint: 46 22 20;
  --info: 127 178 240;
  --info-tint: 16 27 42;
  --elev-1: none;

  background-color: rgb(var(--paper));
  color: rgb(var(--ink));
}

/* Dark peer theme. Pure token overrides — no component anywhere is allowed to
   special-case dark. On dark, elevation is a lighter surface, never a shadow. */
:root[data-theme="dark"] {
  --paper: 18 20 22;
  --paper-sunk: 12 14 15;
  --sheet: 26 29 31;
  --line: 42 47 50;
  --line-strong: 60 67 72;

  --ink: 236 238 239;
  --ink-2: 175 182 185;
  --ink-3: 138 146 150;
  --ink-off: 110 118 122;
  --ink-invert: 7 20 16;

  --yes: 53 165 126;
  --yes-hover: 43 141 107;
  --yes-line: 94 208 166;
  --yes-tint: 18 38 31;

  --live: 225 131 78;
  --live-ink: 240 163 117;

  --ok: 94 208 166;
  --ok-tint: 18 38 31;
  --attn: 240 179 87;
  --attn-tint: 42 32 16;
  --urgent: 255 138 122;
  --urgent-tint: 46 22 20;
  --info: 127 178 240;
  --info-tint: 16 27 42;

  --elev-1: none;
  --elev-pop: 0 12px 32px -16px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: 18 20 22;
    --paper-sunk: 12 14 15;
    --sheet: 26 29 31;
    --line: 42 47 50;
    --line-strong: 60 67 72;

    --ink: 236 238 239;
    --ink-2: 175 182 185;
    --ink-3: 138 146 150;
    --ink-off: 110 118 122;
    --ink-invert: 7 20 16;

    --yes: 53 165 126;
    --yes-hover: 43 141 107;
    --yes-line: 94 208 166;
    --yes-tint: 18 38 31;

    --live: 225 131 78;
    --live-ink: 240 163 117;

    --ok: 94 208 166;
    --ok-tint: 18 38 31;
    --attn: 240 179 87;
    --attn-tint: 42 32 16;
    --urgent: 255 138 122;
    --urgent-tint: 46 22 20;
    --info: 127 178 240;
    --info-tint: 16 27 42;

    --elev-1: none;
    --elev-pop: 0 12px 32px -16px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  }
}

/*
 * The inverted band on a DARK page does NOT go white.
 *
 * A full inversion works in one direction only: dark-on-light is a confident
 * accent, light-on-dark is a flashbang. On a dark page the band instead becomes
 * a RAISED dark surface — clearly a separate band, no glare, and it keeps the
 * rhythm without punishing anyone reading at night.
 */
:root[data-theme="dark"] .band-invert,
:root[data-theme="dark"].band-invert {
  --paper: 32 36 39;
  --paper-sunk: 26 29 32;
  --sheet: 40 45 48;
  --line: 56 62 66;
  --line-strong: 78 86 92;
  --ink: 236 238 239;
  --ink-2: 181 188 191;
  --ink-3: 148 156 160;
  --ink-off: 116 124 128;
  --ink-invert: 7 20 16;
  --elev-1: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-invert {
    --paper: 32 36 39;
    --paper-sunk: 26 29 32;
    --sheet: 40 45 48;
    --line: 56 62 66;
    --line-strong: 78 86 92;
    --ink: 236 238 239;
    --ink-2: 181 188 191;
    --ink-3: 148 156 160;
    --ink-off: 116 124 128;
    --ink-invert: 7 20 16;
    --elev-1: none;
  }
}