/* ============================================================
   DoseClock.online
   Design Tokens - First Safe Cleanup Pass
   ------------------------------------------------------------
   Purpose:
   - Centralise the visual language.
   - Keep the app clinical, calm, accessible, and consistent.
   - Override the existing large site.css without deleting it.

   Notes:
   - Atkinson Hyperlegible is the preferred font for DoseClock.
   - This file does not download or bundle font files.
   - If the font is installed or later self-hosted, the stack will use it.
   ============================================================ */

:root {
  /* Brand colours */
  --primary: #0a2d6f;
  --primary-900: #061f4b;
  --primary-800: #082658;
  --primary-700: #0a2d6f;
  --primary-600: #12449e;
  --primary-500: #1d5ec9;
  --primary-hover: #061f4b;
  --accent: #2b8cff;

  /* Clinical semantic colours */
  --success: #177245;
  --success-soft: #e8f6ee;
  --success-strong: #125d38;

  --warning: #9a6700;
  --warning-soft: #fff4db;
  --warning-strong: #7a4e00;

  --danger: #b42318;
  --danger-soft: #fde8e8;
  --danger-strong: #8f231b;

  --info: #1d4ed8;
  --info-soft: #e8f1ff;
  --info-strong: #1e40af;

  /* Timeslot colours */
  --morning: #0a7fb1;
  --lunch: #1a8f4f;
  --teatime: #b15a0a;
  --bedtime: #5c3db3;
  --prn: #5f3dc4;

  /* Surfaces */
  --page-bg: #eef3f9;
  --surface: #ffffff;
  --surface-soft: #f7fafe;
  --surface-2: #f3f6fb;
  --surface-hover: #eef4fb;
  --surface-active: #e7eef8;

  /* Text */
  --text: #18212f;
  --text-muted: #526174;
  --text-soft: #6f7e90;
  --text-on-primary: #ffffff;

  /* Lines */
  --border: #d7e0eb;
  --border-strong: #bdcadb;

  /* Effects */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.16);

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1180px;
  --gutter: clamp(16px, 2vw, 24px);
  --header-h: 84px;

  /* Focus */
  --focus-ring: 0 0 0 4px rgba(43, 140, 255, 0.28);

  /* Typography */
  --font-family-base: "Atkinson Hyperlegible", "Inter", "Segoe UI", Arial, sans-serif;
  --font-family-ui: "Atkinson Hyperlegible", "Inter", "Segoe UI", Arial, sans-serif;
  --font-size-xs: 0.88rem;
  --font-size-sm: 0.95rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.12rem;
  --font-size-xl: clamp(1.3rem, 1.6vw, 1.7rem);
  --font-size-2xl: clamp(1.7rem, 2.2vw, 2.15rem);
  --line-height-tight: 1.22;
  --line-height-body: 1.62;

  /* Touch targets */
  --touch-target-min: 44px;

  /* Tables */
  --table-row-alt: #f7f9fc;
  --table-row-hover: #ecf2fb;
}