/* Synced copy of design-system/carewatch-design-system/project/colors_and_type.css — do not edit here; update the source and re-sync. */
/* ============================================================
   CAREWATCH — Design Tokens
   colors_and_type.css  ·  single source of truth
   Dark-mode-first. Sized for a 480 × 640 px, 2.4" TFT panel
   and for an elderly user with dementia + low vision.
   ============================================================ */

/* Atkinson Hyperlegible — engineered by the Braille Institute for
   maximum letterform distinction at low acuity. This is the real
   intended typeface, not a substitution. */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* -------- TYPEFACE -------- */
  --font: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;

  /* -------- TYPE SCALE (watch, 480px panel) --------
     Deliberately few sizes. Everything Jan reads is large.
     px values are literal device pixels on the 480×640 panel. */
  --t-clock:      128px;  /* watch-face time only */
  --t-clock-sm:    84px;  /* secondary clock / words line */
  --t-title:       44px;  /* contact names, screen titles, message body */
  --t-action:      34px;  /* button labels */
  --t-body:        28px;  /* standard body, list labels */
  --t-caption:     22px;  /* MINIMUM size anywhere on the watch */

  /* Weights — Atkinson ships 400 / 700 only. We lean on 700 a lot. */
  --w-regular: 400;
  --w-bold:    700;

  /* Line heights */
  --lh-tight:  1.02;  /* clock */
  --lh-snug:   1.15;  /* titles */
  --lh-body:   1.35;  /* body / messages */

  /* -------- COLOUR : SURFACES (dark-mode-first) -------- */
  --bg-0:  #0C1113;   /* app background — near-black, faint cool cast */
  --bg-1:  #161E21;   /* raised surface / card */
  --bg-2:  #222D31;   /* pressed / higher elevation */
  --hairline: rgba(255,255,255,0.09);  /* the only "border" we use */

  /* -------- COLOUR : FOREGROUND -------- */
  --fg-1:  #F3F6F7;   /* primary text — near-white, ~16:1 on bg-0 */
  --fg-2:  #AAB8BD;   /* secondary text — ~7:1 on bg-0 */
  --fg-3:  #5A676C;   /* disabled / tertiary — never load-bearing */

  /* -------- COLOUR : SEMANTIC ACCENTS --------
     One calm primary, one affirmation, one caution, one emergency.
     RED IS RESERVED for Decline / End / SOS. Nothing reassuring is red. */

  /* Calm primary — used for Call, primary actions, links, the clock accent */
  --calm:        #3FB1C9;   /* accent text / icon / ring on dark */
  --calm-fill:   #1C7C92;   /* solid button fill, white text (~4.8:1) */
  --calm-soft:   #16323A;   /* tinted surface */

  /* Affirmation / YES — Answer, Yes, Sent, success. Maps to the UPPER button. */
  --affirm:      #5CD08C;   /* accent on dark */
  --affirm-fill: #17834B;   /* solid button fill, white text (~4.7:1) */
  --affirm-soft: #102A1E;

  /* Dismiss / NO — Decline, End call, “No thanks”, Cancel. A calm neutral
     SLATE, deliberately NOT red: red/amber is reserved for SOS only in
     Jan-facing UI (see interaction-principles §5). Maps to the LOWER button. */
  --dismiss:      #9DB0B6;  /* accent on dark */
  --dismiss-fill: #3A4A50;  /* solid fill, white text (~6:1) */
  --dismiss-soft: #1A2226;

  /* Caution amber — CARER SURFACES ONLY (dashboard + admin). Never in
     Jan-facing UI, where amber reads as SOS. */
  --caution:      #F3B948;
  --caution-fill: #B9821A;
  --caution-soft: #2A2310;

  /* Emergency red — CARER SURFACES ONLY (dashboard alerts). In Jan-facing
     UI the only red/amber is SOS. */
  --emergency:      #F26A60;
  --emergency-fill: #C5392E;
  --emergency-soft: #2C1411;

  /* SOS — amber→red, RESERVED. This palette must not appear anywhere else in
     Jan-facing UI, so it always means exactly one thing. */
  --sos:        #E8862B;
  --sos-deep:   #B5391F;
  --sos-soft:   #2A1208;

  /* Screen-share active — Jack is watching. Calm violet edge, not alarming. */
  --share:      #9C7BE0;

  /* -------- SPACING (8px base) -------- */
  --s-1:  8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;   /* default screen padding */
  --s-5: 32px;
  --s-6: 48px;

  /* -------- TAP TARGETS --------
     Authoritative floor is 64dp (= 64px at mdpi, ~1.33× Material's 48dp).
     We run primary actions larger (96–128px) and full-width; two 64dp
     controls still sit side-by-side across the panel. Mis-taps are common
     and costly, so targets are forgiving. */
  --tap-min:      64px;
  --tap-primary: 104px;

  /* -------- RADII — generous, friendly, never sharp -------- */
  --r-button: 22px;
  --r-card:   28px;
  --r-full:   999px;

  /* -------- MOTION — minimal, brief, purposeful -------- */
  --ease:        cubic-bezier(0.2, 0.0, 0.2, 1);   /* calm ease-out */
  --dur-fast:    140ms;   /* press feedback */
  --dur:         220ms;   /* standard transition */
  --dur-screen:  260ms;   /* screen change */
  --dur-sos:    3000ms;   /* SOS confirmation hold */
}

/* Honour the user's reduced-motion preference — default to calm. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-screen: 0ms; }
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.cw-clock     { font: var(--w-bold) var(--t-clock)/var(--lh-tight) var(--font); letter-spacing: -2px; color: var(--fg-1); }
.cw-clock-sm  { font: var(--w-regular) var(--t-clock-sm)/var(--lh-tight) var(--font); color: var(--fg-1); }
.cw-title     { font: var(--w-bold) var(--t-title)/var(--lh-snug) var(--font); color: var(--fg-1); }
.cw-action    { font: var(--w-bold) var(--t-action)/1.1 var(--font); }
.cw-body      { font: var(--w-regular) var(--t-body)/var(--lh-body) var(--font); color: var(--fg-1); }
.cw-caption   { font: var(--w-regular) var(--t-caption)/var(--lh-body) var(--font); color: var(--fg-2); letter-spacing: 0.2px; }