/* ==========================================================================
   Command Center — design tokens
   Generated from the design system's tokens.json. Do not hand-tune the values
   in the two theme blocks; change them in the design system and re-copy, or
   the app and the spec drift apart.

   Night shift (dark) is the default. Daylight (light) is defined but not yet
   reachable from the UI -- see the note above [data-theme="light"].
   ========================================================================== */

:root,
[data-theme='dark'] {
  --ground: #15121f;
  --surface: #1f1a2e;
  --surface-raised: #2a2340;
  --line: #3d3458;
  --line-strong: #8476b3;
  --drop: #07060b;
  --ink: #f7f1ff;
  --ink-muted: #b9aed3;
  --ink-faint: #9488b3;
  --on-color: #1b1530;
  --flare: #ff7a45;
  --flare-text: #ff7a45;
  --bible: #ffc93c;
  --bible-soft: #3d3220;
  --bible-text: #ffc93c;
  --cyber: #b8f35a;
  --cyber-soft: #2a3a22;
  --cyber-text: #b8f35a;
  --chess: #6cc4ff;
  --chess-soft: #1f3247;
  --chess-text: #6cc4ff;
  --mind: #ff8ac4;
  --mind-soft: #3f2338;
  --mind-text: #ff8ac4;
  --pop: 4px 4px 0 #07060b;
  --pop-sm: 2px 2px 0 #07060b;
  --pop-lg: 6px 6px 0 #07060b;
}

/* Not yet switchable: nothing sets data-theme="light" today. The values are
   kept in sync with the design system so turning Daylight on later is a
   toggle and a contrast pass, not a re-derivation. */
[data-theme='light'] {
  --ground: #fff4e4;
  --surface: #ffffff;
  --surface-raised: #fff9f0;
  --line: #eadcc6;
  --line-strong: #1b1530;
  --drop: #1b1530;
  --ink: #1b1530;
  --ink-muted: #544a6e;
  --ink-faint: #6e6388;
  --on-color: #1b1530;
  --flare: #ff7a45;
  --flare-text: #c2410c;
  --bible: #ffc93c;
  --bible-soft: #ffe7b0;
  --bible-text: #8a5a00;
  --cyber: #b8f35a;
  --cyber-soft: #e6fbc4;
  --cyber-text: #3f7a00;
  --chess: #6cc4ff;
  --chess-soft: #d6eeff;
  --chess-text: #0b66b0;
  --mind: #ff8ac4;
  --mind-soft: #ffd9ec;
  --mind-text: #b2306f;
  --pop: 4px 4px 0 #1b1530;
  --pop-sm: 2px 2px 0 #1b1530;
  --pop-lg: 6px 6px 0 #1b1530;
}

/* --- Local extensions ----------------------------------------------------
   The design system has five hues and no state colours, but the app has to
   say "this failed", "you won" and "you are behind". Borrowing an area colour
   for that is explicitly out -- bible gold would have to mean both "Bible"
   and "warning" -- so these three follow the same -soft / -text pattern as
   the areas and nothing else.

   warn aliases flare on purpose. Flare is already the "look here" colour, and
   both warnings in the app (plan behind, item in progress) are nudges rather
   than actions, so they do not need a hue of their own. --flare-soft also
   fills a real gap: .cc-a-flare had no tint and fell back to surface-raised.
   ------------------------------------------------------------------------- */

:root,
[data-theme='dark'] {
  --flare-soft: #3f2418;

  /* Red, kept clear of mind's pastel pink. -text is two steps lighter than
     the fill so it still holds 4.5:1 on surface-raised, the lightest surface
     body copy ever lands on. */
  --danger: #ff4d5e;
  --danger-soft: #43202a;
  --danger-text: #ff6b78;

  /* Mint, kept clear of cyber's yellow-green lime. */
  --ok: #3ddc97;
  --ok-soft: #17382c;
  --ok-text: #3ddc97;
}

[data-theme='light'] {
  --flare-soft: #ffe3d6;
  --danger: #ff4d5e;
  --danger-soft: #ffdfe3;
  --danger-text: #be123c;
  --ok: #3ddc97;
  --ok-soft: #cdf5e4;
  --ok-text: #047857;
}

:root {
  --warn: var(--flare);
  --warn-soft: var(--flare-soft);
  --warn-text: var(--flare-text);
}

/* --- Space, shape, type -------------------------------------------------- */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --text-hero: 800 56px/56px var(--font-display);
  --text-h1: 800 36px/40px var(--font-display);
  --text-h2: 700 22px/28px var(--font-display);
  --text-h3: 700 17px/22px var(--font-display);
  --text-body: 400 15px/22px var(--font-display);
  --text-body-strong: 600 15px/22px var(--font-display);
  --text-label: 700 12px/16px var(--font-display);
  --text-stat: 700 40px/44px var(--font-mono);
  --text-code: 500 13px/18px var(--font-mono);

  /* Page shell. The design system fixes the content column at 1120px; the
     gutter is a variable because the phone needs a smaller one than the
     laptop and several places outside the main container need to match it. */
  --page-max: 1120px;
  --page-gutter: var(--space-4);
}

/* ==========================================================================
   The two screens this app is actually used on
   ==========================================================================

   iPhone 13      390 x 844 CSS px, DPR 3, safe areas 47px top / 34px bottom
   EliteBook 830  1920 x 1080 at 125% scaling, so about 1536 x 750 CSS px

   One width breakpoint, at 760px, because there is nothing to serve between
   those two numbers. Widths in between will look like one or the other and
   are not designed for.

   Two things deliberately do NOT key off width:

     (pointer: coarse)   touch target sizing and the 16px input rule. These
                         are about fingers, not pixels.
     (max-height: 820px) the laptop viewport is SHORTER than the phone's
                         (750 vs 844), which is the opposite of what the
                         usual mobile-first assumptions expect. A sticky
                         topbar costs 10% of the laptop screen.
   ========================================================================== */

@media (min-width: 760px) {
  :root {
    --page-gutter: var(--space-6);
  }
}