/* School-DMS — design tokens
 * The single source of truth for colour, type, spacing, motion.
 * Mobile-first. WCAG AA contrast on every text/background pairing.
 */

/* ─── Brand web fonts (self-hosted, no external requests) ───────
 * Amaranth = display/headings, Prompt = body.  Latin + Latin-Ext
 * subsets (Latin-Ext covers Afrikaans diacritics). font-display:swap.
 */
@font-face { font-family: 'Amaranth'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amaranth-400-latin.83cb1bbbe2a4.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amaranth'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/amaranth-700-latin.b3fbff40abbf.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/prompt-400-latin-ext.cb51700739eb.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/prompt-400-latin.d00c3e51355e.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/prompt-500-latin-ext.c5480196e5fc.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/prompt-500-latin.862948dfe28d.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/prompt-600-latin-ext.84d714cb9637.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/prompt-600-latin.637eb2ab4128.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/prompt-700-latin-ext.9216ac9df2ee.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Prompt'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/prompt-700-latin.3d353ab63f7f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ─── Brand — Dories orange (logo #e2703b at 500/600; bright, matches the mark) ─── */
  --color-brand-50:  #fdf3ed;
  --color-brand-100: #fbe0d3;
  --color-brand-200: #f6c3aa;
  --color-brand-300: #f0a37c;
  --color-brand-400: #ea8553;
  --color-brand-500: #e2703b;
  --color-brand-600: #d65f2a;
  --color-brand-700: #b54b1f;
  --color-brand-800: #913c1a;
  --color-brand-900: #76321a;
  --color-brand-on:  #ffffff;

  /* ─── Accent — Dories green (logo #289950 at 500; 600+ darkened for AA) ── */
  --color-accent-50:  #eef9f1;
  --color-accent-100: #d2f0db;
  --color-accent-200: #a7e0bb;
  --color-accent-300: #6ecb8f;
  --color-accent-400: #3fb068;
  --color-accent-500: #289950;
  --color-accent-600: #1f7d40;
  --color-accent-700: #196535;
  --color-accent-800: #15512c;
  --color-accent-900: #114124;
  --color-accent-on:  #ffffff;

  /* ─── Surface ───────────────────────────────────────────── */
  --color-bg:        #f8fafc;
  --color-surface:   #ffffff;
  --color-surface-2: #f1f5f9;
  --color-border:    #e2e8f0;
  --color-overlay:   rgba(15, 23, 42, 0.45);

  /* ─── Text (all verified WCAG AA on white) ──────────────── */
  --color-text:        #0f172a; /* 16.1:1 */
  --color-text-muted:  #475569; /*  7.6:1 */
  --color-text-subtle: #64748b; /*  4.7:1 — ≥18px or bold only */
  --color-text-on-brand: #ffffff;

  /* ─── Status ────────────────────────────────────────────── */
  --color-success-50:  #eef9f1; /* brand green (accent-50) — success == Dories green */
  --color-success-600: #1f7d40; /* accent-600 (WCAG AA on white) */
  --color-success-700: #196535; /* accent-700 */
  --color-warning-50:  #fffbeb;
  --color-warning-600: #b45309;
  --color-warning-700: #92400e;
  --color-danger-50:   #fef2f2;
  --color-danger-600:  #b91c1c;
  --color-danger-700:  #991b1b;
  --color-info-50:     #eff6ff;
  --color-info-600:    #1d4ed8;

  /* ─── Type scale (px) — base 16 for iOS-zoom safety ─────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --font-sans: Prompt, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: Amaranth, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ─── Spacing (4-pt grid) ───────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Touch target (Apple HIG / Material) ────────────────── */
  --tap-min: 44px;

  /* ─── Radii ─────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* ─── Shadows ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 16px 40px -8px rgba(15, 23, 42, 0.18);
  --shadow-fab: 0 8px 24px -4px rgba(214, 95, 42, 0.45);

  /* ─── Motion ────────────────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --easing:      cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─── Safe areas (iOS notch / Android edge-to-edge) ─────── */
  --safe-top:    env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left:   env(safe-area-inset-left, 0);
  --safe-right:  env(safe-area-inset-right, 0);

  /* ─── Mobile layout heights ─────────────────────────────── */
  --topbar-h:     56px;
  --bottomnav-h:  64px;
  --bottomnav-total: calc(var(--bottomnav-h) + var(--safe-bottom));
}