/* Global Horizon — design tokens
 *
 * Navy, ember, line and canvas are EXACT values from the Global Horizon Word
 * templates. The blue ramp is sampled from the gradient inside the logo mark,
 * so the app's blues are literally the logo's blues.
 *
 * Do not add a colour here without a reason. See DESIGN-DECISIONS.md.
 */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --navy-900:   #18204A;   /* deepest, pressed states on navy */
  --navy:       #243061;   /* PRIMARY: rail, tiles, primary buttons, headings */
  --navy-700:   #24487C;   /* gradient mid, hover on navy */
  --blue-600:   #245D94;   /* from the mark */
  --blue-500:   #2471AB;   /* from the mark, gradient end */
  --blue-400:   #2485C2;   /* from the mark, brightest wave. tile shelf */
  --blue-300:   #7BB4DC;   /* secondary copy on navy */
  --blue-200:   #A9CDE6;   /* tertiary copy on navy */
  --sky:        #E7F1F9;   /* info pill background, avatar background */
  --sky-deep:   #C6DDEF;   /* body copy on navy */

  --ember:      #EA6020;   /* ACCENT: overdue, high priority, unread, destructive */
  --ember-bg:   #FDEDE3;
  --ember-dark: #C8451F;   /* ember text on ember-bg, for contrast */

  /* ---- Signal --------------------------------------------------------- */
  --amber:      #C9821A;   /* gold on purpose, so it never reads as brand accent */
  --amber-fg:   #8A5A12;
  --amber-bg:   #FDF3E0;
  --amber-line: #F0DDB4;
  --green:      #2E7D51;
  --green-fg:   #24603E;
  --green-bg:   #EAF6EF;
  --green-line: #C5E5D2;
  --green-dot:  #35A06A;

  /* ---- Neutral -------------------------------------------------------- */
  --ink:        #1C2438;   /* body copy. navy-tinted, never pure black */
  --ink-600:    #586178;   /* secondary copy */
  --ink-400:    #8A93A6;   /* labels, eyebrows */
  --ink-300:    #A2AAB9;   /* placeholder text */
  --grey:       #C6CCD8;   /* empty-state icons, unchecked boxes */
  --line:       #DDE1EA;   /* EXACT. every border and rule */
  --line-soft:  #EDF0F5;   /* table row divider */
  --line-faint: #E9EDF3;   /* list row divider */
  --canvas:     #F4F6FA;   /* EXACT. page background */
  --surface:    #FFFFFF;   /* cards */
  --surface-alt:#F7F9FC;   /* table header, inset panels */
  --chip:       #EFF2F7;   /* neutral pill, icon button background */

  /* ---- Type ----------------------------------------------------------- */
  --font-display: Poppins, 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* ---- Shape ---------------------------------------------------------- */
  --radius-sm: 7px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --gutter:    16px;

  --shadow-card:  0 6px 18px -10px rgba(28, 36, 56, 0.25);
  --shadow-tile:  0 10px 24px -14px rgba(28, 36, 56, 0.55);
  --shadow-sheet: 0 -10px 40px -12px rgba(28, 36, 56, 0.40);
  --shadow-focus: 0 0 0 3px rgba(36, 48, 97, 0.14);

  /* ---- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;

  /* ---- Layout --------------------------------------------------------- */
  --rail-w:      248px;
  --topbar-h:    65px;
  --appbar-h:    57px;
  --bottomnav-h: 68px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  --z-sticky: 10;
  --z-nav:    20;
  --z-sheet:  30;
  --z-toast:  40;
  --z-modal:  50;
}

/* Status colour map. One status, one colour, everywhere it appears —
 * dot, pill, notification icon, log entry. Never diverge from this. */
:root {
  --status-neutral-fg: var(--ink-600);   --status-neutral-bg: var(--chip);
  --status-progress-fg: var(--amber-fg); --status-progress-bg: var(--amber-bg);
  --status-done-fg:    var(--green-fg);  --status-done-bg:    var(--green-bg);
  --status-info-fg:    var(--navy);      --status-info-bg:    var(--sky);
  --status-alert-fg:   var(--ember-dark);--status-alert-bg:   var(--ember-bg);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}