/*
  DESIGN TOKENS
  =============
  The workshop's interface borrows its material language from the room
  itself: brass hardware, aged paper, cork, and dial-lit panels. Every
  overlay reuses these tokens rather than inventing its own palette, so
  the whole place feels like one continuous material world instead of a
  stack of separate "apps".
*/

:root {
  /* --- Palette --- */
  --wood-dark:   #2b1d14;   /* deep walnut — structure, shadows */
  --wood-mid:    #6b4a34;   /* warm oak — frames, borders */
  --wood-light:  #a9764f;   /* light pine — highlights on wood */
  --brass:       #b8863b;   /* hardware, focus rings, the signature accent */
  --brass-bright:#e0ab5c;
  --paper:       #ede3d0;   /* aged paper — notebook & pinboard surfaces */
  --paper-dark:  #d8caa8;
  --ink:         #2a231d;   /* primary text on light surfaces */
  --ink-soft:    #55483b;
  --teal:        #3c5a53;   /* muted workshop paint — secondary accent, calm state */
  --teal-bright: #6b9c8e;
  --screen-bg:   #10171a;   /* computer overlay background */
  --screen-glow: #7fd8c4;

  /* --- Surfaces (dark chrome for HUD, floating over the 3D scene) --- */
  --surface-glass: rgba(20, 15, 10, 0.55);
  --surface-glass-strong: rgba(15, 11, 8, 0.82);

  /* --- Type --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  /* --- Layout --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;

  /* --- Shadows ---
     Interface & Design Refinement phase — "shared shadows." Three
     separate files (buildmode.css, music.css, phone.css) each hardcoded
     the exact same "floating panel, brass inset ring" shadow byte for
     byte; several more each had their own one-off elevation value doing
     the same job at a slightly different strength. A small, real scale
     — soft/medium/panel/float — rather than a token for literally every
     value that existed before, since not every one-off actually needed
     to survive; several were already close enough to round to one of
     these without anyone ever noticing the difference. */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-tile: 0 4px 10px rgba(0, 0, 0, 0.3);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-medium: 260ms;
  --duration-slow: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-medium: 0ms;
    --duration-slow: 0ms;
  }
  /* Version 3, Phase 12 ("Accessibility & Comfort Pass") — the two
     continuous, infinite-loop pulse animations in the codebase
     (`.entry-status`'s own loading breathe, the resident "thinking"
     dots) each set their own `animation-duration` directly in the
     shorthand rather than through a token, so zeroing the durations
     above did nothing to stop them — the most nausea/distraction-prone
     motion in the whole app was exactly the motion this block wasn't
     actually reaching. Named directly here, in the one shared home for
     motion overrides, rather than duplicating this same media query
     across `main.css`/`overlays.css`. Each settles at roughly the
     midpoint of its own animated range, the same "a static, settled
     read instead of the mid-pulse frame" instinct `.entry-status.ready`
     already uses for its own non-animated state. */
  .entry-status {
    animation: none;
    opacity: 0.7;
  }
  .resident-message-thinking span {
    animation: none;
    opacity: 0.6;
  }
}

/* "Larger touch targets. Comfortable button spacing... reduced
   accidental touches." One shared baseline, applied globally, rather
   than touching every individual button class across every interface —
   `min-height`/`min-width` only ever grows something that falls short of
   a comfortable size; nothing already tall/wide enough is affected, and
   nothing here overrides an element's own explicit sizing decisions if
   it already meets the bar. Scoped to `(pointer: coarse)` — the actual
   signal for "this is being tapped with a finger, not clicked with a
   precise mouse cursor" — rather than viewport width, so a touch laptop
   and a mouse-driven one at the same narrow width don't get treated the
   same way. */
@media (pointer: coarse) {
  button,
  select,
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"] {
    min-height: 40px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }
  a[role="button"] {
    min-height: 40px;
  }
}

/* "Clear interaction states." A global fallback, keyboard-only
   (:focus-visible, not :focus) so it never draws a ring around an
   ordinary mouse click or touch tap — only every interactive element
   that doesn't already define its own explicit focus treatment gets it,
   since :focus-visible only ever wins when nothing more specific already
   set outline/box-shadow for that same state. */
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}