/* ============================================================
   TOKENS — the single source of truth for colour, type and space.
   Mirrored verbatim into the Claude Design project, so the design
   system and the running app cannot drift apart.

   Palette brief: this is read on a phone in a hallway AND on a screen
   bolted to a laundry-room wall, from about three metres, often under
   a single fluorescent tube. So:

     - contrast first, decoration never
     - state is NEVER carried by hue alone. Free vs taken differs in
       fill, in weight, and in the word printed on it, so the screen
       still works for a colourblind resident, in glare, or at an angle
     - a warm neutral rather than pure grey, because pure grey under
       fluorescent light reads slightly blue and slightly clinical
   ============================================================ */

:root {
  /* --- Neutral ink scale ------------------------------------- */
  --ink-0:   #ffffff;
  --ink-50:  #f8f8f7;
  --ink-100: #efefed;
  --ink-200: #dededb;
  --ink-300: #c3c2be;
  --ink-400: #999893;
  --ink-500: #74736e;
  --ink-600: #565551;
  --ink-700: #3c3b38;
  --ink-800: #262523;
  --ink-900: #121211;

  /* --- Surfaces ---------------------------------------------- */
  --bg-app:      var(--ink-50);
  --surface:     var(--ink-0);
  --surface-sunk: var(--ink-100);
  --surface-hover: var(--ink-50);

  /* --- Text --------------------------------------------------- */
  --text-strong: var(--ink-900);
  --text-body:   var(--ink-800);
  --text-muted:  var(--ink-500);
  --text-faint:  var(--ink-400);

  /* --- Lines -------------------------------------------------- */
  --line:        var(--ink-200);
  --line-strong: var(--ink-300);

  /* --- Slot states -------------------------------------------
     Each has a fill, a border and a text colour that passes AA on
     its own fill. Never use the text colour on --surface. */
  --free-fill:   #e7f2e5;
  --free-line:   #6fa06a;
  --free-text:   #1f5c22;

  --mine-fill:   #e3edf8;
  --mine-line:   #3b7cc4;
  --mine-text:   #14528f;

  --closed-fill: #faf0d9;
  --closed-line: #c9a44a;
  --closed-text: #7a4f05;

  --danger-fill: #fbeaea;
  --danger-line: #d08b8b;
  --danger-text: #92292a;

  /* Taken slots are deliberately NEUTRAL, not a colour. They are the
     most common state on a busy calendar, and colouring them would
     turn the whole screen into noise and leave "free" competing for
     attention instead of owning it. */
  --taken-fill:  var(--ink-100);
  --taken-line:  var(--ink-300);
  --taken-text:  var(--ink-800);

  --accent:      #1d5fa8;
  --accent-hover:#164a83;

  /* --- Type ---------------------------------------------------
     System stack: fastest first paint on a Raspberry Pi, no licence
     to track, and no layout shift while a webfont loads on a screen
     nobody is going to reload. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:  0.75rem;   /* 12px — labels, metadata */
  --text-sm:  0.875rem;  /* 14px — secondary */
  --text-md:  1rem;      /* 16px — body, and the phone minimum that avoids iOS zoom-on-focus */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px — section headings */
  --text-2xl: 1.75rem;   /* 28px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;

  /* --- Space --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* Touch targets. 44px is the accessibility floor for a phone; the
     wall screen gets more, because people jab at it with a laundry
     basket under one arm. */
  --touch-min:   44px;
  --touch-kiosk: 64px;

  --ring: 0 0 0 3px rgba(29, 95, 168, 0.35);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ============================================================
   Dark theme. The wall screen lives in a basement corridor that is
   dim at night, and a full-brightness white panel there is genuinely
   unpleasant. Follows the system by default; the kiosk can pin it.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app:        var(--ink-900);
    --surface:       #1b1a19;
    --surface-sunk:  #121211;
    --surface-hover: #262523;

    --text-strong: var(--ink-0);
    --text-body:   var(--ink-100);
    --text-muted:  var(--ink-400);
    --text-faint:  var(--ink-500);

    --line:        #34332f;
    --line-strong: #4a4844;

    --free-fill:   #1c2e1c;
    --free-line:   #4a7a45;
    --free-text:   #a8d7a2;

    --mine-fill:   #16283d;
    --mine-line:   #3b7cc4;
    --mine-text:   #a9cdf2;

    --closed-fill: #33280f;
    --closed-line: #8a6f2a;
    --closed-text: #e6c878;

    --danger-fill: #351a1a;
    --danger-line: #8a4444;
    --danger-text: #efaaaa;

    --taken-fill:  #262523;
    --taken-line:  #4a4844;
    --taken-text:  var(--ink-100);

    --accent:      #6ea8e0;
    --accent-hover:#8dbdea;
    --ring: 0 0 0 3px rgba(110, 168, 224, 0.4);
  }
}

/* Explicit override, so the kiosk can pin a theme regardless of what
   the Raspberry Pi's OS thinks the time of day is. */
:root[data-theme="dark"] {
  --bg-app:        var(--ink-900);
  --surface:       #1b1a19;
  --surface-sunk:  #121211;
  --surface-hover: #262523;
  --text-strong: var(--ink-0);
  --text-body:   var(--ink-100);
  --text-muted:  var(--ink-400);
  --text-faint:  var(--ink-500);
  --line:        #34332f;
  --line-strong: #4a4844;
  --free-fill:   #1c2e1c;
  --free-line:   #4a7a45;
  --free-text:   #a8d7a2;
  --mine-fill:   #16283d;
  --mine-line:   #3b7cc4;
  --mine-text:   #a9cdf2;
  --closed-fill: #33280f;
  --closed-line: #8a6f2a;
  --closed-text: #e6c878;
  --danger-fill: #351a1a;
  --danger-line: #8a4444;
  --danger-text: #efaaaa;
  --taken-fill:  #262523;
  --taken-line:  #4a4844;
  --taken-text:  var(--ink-100);
  --accent:      #6ea8e0;
  --accent-hover:#8dbdea;
  --ring: 0 0 0 3px rgba(110, 168, 224, 0.4);
}