/* Design tokens — the single source of truth for look & feel, extracted verbatim from
   the designer's dashboard. Components reference these vars; to restyle, change values
   here, not in the component CSS. Values are the ones already used in the design.
   Breakpoints cannot live here (a media query does not read var()); their scale is at
   the top of responsive.css. */

:root {
  /* ---- Accent colours (from the design) ---- */
  --red: #f65341;    /* status dot: critical / freeing soon */
  --amber: #ffc001;  /* status dot: warning / soon */
  --green: #41f68c;  /* status dot: ok / free */
  --warm: #f6a741;   /* warm accent: room heat */

  /* Blue accent (player art gradient) */
  --blue-deep: #12213f;
  --blue-mid: #1c3c6b;
  --blue: #3f6fa8;

  --grey: #9aa0ab;   /* neutral dot */

  /* ---- Base surface & ink ---- */
  --bg-app: #0c1226;        /* page background beneath the photo */
  --ink: #ffffff;           /* primary text on glass */
  --ink-on-light: #333333;  /* text on white / active surfaces */
  --text-dim: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.5);
  --text-faintest: rgba(255, 255, 255, 0.35);
  --text-control: rgba(255, 255, 255, 0.7);        /* label of an unselected tab / floor button */  /* footnotes, secondary meta on report pages */

  /* Scrim over the background photo (top -> bottom) */
  --scrim-top: rgba(8, 12, 28, 0.1);
  --scrim-bottom: rgba(8, 12, 28, 0.55);

  /* ---- Glass surfaces (translucent white layers) ---- */
  --glass: rgba(255, 255, 255, 0.12);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --glass-soft: rgba(255, 255, 255, 0.1);
  --glass-pill: rgba(255, 255, 255, 0.15);
  --glass-pill-active: rgba(255, 255, 255, 0.2);
  --blur: 7.5px;                                   /* backdrop-filter blur amount */
  --blur-modal: 24px;                              /* dialogs and the phone menu */
  --overlay: rgba(3, 10, 24, 0.6);                 /* page dimmed behind a dialog */
  --border-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
  --hairline: rgba(255, 255, 255, 0.2);            /* dividers / borders */
  --hairline-soft: rgba(255, 255, 255, 0.08);      /* table row separators */

  /* Neutral surfaces over the photo, by strength. Same family as --glass-*, but these are
     filled controls rather than panels: a selected tab, a status chip, a progress fill.
     Kept as tokens because the same white shows up in a dozen components — changing the
     contrast of the UI should not mean hunting for rgba() literals. */
  --surface-active: #ffffff;                       /* selected tab / floor button */
  --surface-chip: rgba(255, 255, 255, 0.2);        /* status pills, scrub track */
  --surface-faint: rgba(255, 255, 255, 0.08);      /* quiet fills: table head */
  --surface-bright: rgba(255, 255, 255, 0.6);      /* player scrub fill and thumb edge */
  --track-bg: rgba(255, 255, 255, 0.1);            /* empty part of a progress/utilization bar */

  /* ---- Radii ---- */
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 14px;

  /* ---- Spacing scale (the gaps/paddings used across the design) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---- Typography ---- */
  --font-family: "Roobert PRO", -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* recovery codes */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  /* Body sizes stay fixed: they are already small, and shrinking them on a phone —
     where the layout is a single wide column anyway — only hurts legibility.
     Display sizes are fluid: a 36px figure that reads fine on a monitor dominates a
     390px column. Each clamp grows from its floor at a 360px viewport to the original
     px at 1200px, which is exactly where the one-screen layout takes over, so nothing
     changes on laptop or monitor. */
  /* 10 and 11 exist for the schedule's month grid only: a day there is 36px wide and
     "09:00" fits it at 11px, not at 12. */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: clamp(16px, 0.25vw + 15.1px, 18px);
  --fs-24: clamp(19px, 0.6vw + 16.9px, 24px);
  --fs-28: clamp(21px, 0.84vw + 18px, 28px);
  --fs-36: clamp(26px, 1.2vw + 21.7px, 36px);

  /* ---- Gauge / magnitude ramp (from the occupancy gauge — reuse for energy load) ---- */
  --gauge-track: rgba(255, 255, 255, 0.28);
  --gauge-low: #e9d9a6;   /* low  */
  --gauge-mid: #f6a741;   /* mid  */
  --gauge-high: #ff5b3d;  /* high */
  --band-ok: rgba(65, 246, 140, 0.45);  /* translucent green nominal band (soft --green) */

  /* ---- Semantic status (roles the design already assigns to the accents above) ---- */
  --state-ok: var(--green);
  --state-warn: var(--amber);
  --state-hot: var(--warm);
  --state-crit: var(--red);
  /* Something that just happened and wants a glance: a person who has just come in. */
  --state-new-bg: rgba(65, 246, 140, 0.16);    /* soft --green fill */
  --state-new-glow: rgba(65, 246, 140, 0.55);  /* pulsing edge around it */

  /* ---- Team schedule: absence colours, today column, past days ---- */
  --duty-day-off: var(--amber);
  --duty-vacation: var(--green);
  --duty-sick: var(--red);
  --duty-today-bg: rgba(255, 255, 255, 0.08);
  --duty-past-opacity: 0.5;

  --avatar-size: 60px;

  /* ---- Chart series for energy phases: alias existing accents (no new colours).
     Revisit with designers if more than three distinct series are ever needed. ---- */
  --phase-1: var(--blue);
  --phase-2: var(--green);
  --phase-3: var(--amber);
}