/*
 * TUTOR Design System - REVISED
 * Foundation file - Package D2a-rev1
 *
 * Token VALUES derived from frequency analysis of all
 * 28 HTML pages on 2026-04-20.
 * Token NAMES preserved from D2a so future migrations
 * use stable identifiers.
 *
 * SOURCE OF VALUES: /tmp/d2a_rev1_inventory.json
 *                   /tmp/d2a_rev1_fonts.json
 *
 * Migration playbook:
 *   1. New page: link this file in <head>, remove inline
 *      tokens, use var(--token-name) throughout.
 *   2. Existing page: D2a links additively. D2b-D2h
 *      remove inline rules per page once parity confirmed.
 *
 * NOTE: --sand, --deep, --ocean, --coral are page-level
 * brand variables. They are NOT redefined here globally.
 * Pages define them in their own <style> blocks.
 *
 * Last updated: 2026-04-20 (Pkg D2a-rev1)
 */

/* ============================================ */
/* COLOR TOKENS - derived from inventory        */
/* ============================================ */

:root {
  /* Brand - derived from top color clusters */
  /* #003d6b: 42 uses across pages */
  --color-brand-primary: #003d6b;
  /* #001f3f: 22 uses (cluster 23 total) */
  --color-brand-primary-hover: #001f3f;
  /* #0077b6: 39 uses */
  --color-brand-secondary: #0077b6;
  /* #e8714a: 54 uses - top non-neutral color */
  --color-brand-accent: #e8714a;
  /* #f0c040: 33 uses */
  --color-brand-gold: #f0c040;
  /* #00c896: 23 uses (cluster 25 total) */
  --color-brand-green: #00c896;
  /* #0066ff: 20 uses */
  --color-brand-blue: #0066ff;
  /* #44eeff: 30 uses */
  --color-brand-cyan: #44eeff;
  /* #ff6b35: 20 uses - distinct from accent */
  --color-brand-orange: #ff6b35;
  /* #ffb800: 11 uses (cluster 14 total) */
  --color-brand-amber: #ffb800;
  /* #ffd60a: 13 uses */
  --color-brand-yellow: #ffd60a;
  /* #06d6a0: 10 uses - distinct from brand-green */
  --color-brand-teal: #06d6a0;

  /* Neutrals - 10-step scale derived from gray clusters */
  /* #f8fafc: 21 uses (cluster 31 total) */
  --color-neutral-50:  #f8fafc;
  /* #f0f4ff: 11 uses (cluster 41 total) */
  --color-neutral-100: #f0f4ff;
  /* #e2e8f0: 66 uses - top neutral */
  --color-neutral-200: #e2e8f0;
  /* #dddddd: 9 uses (cluster 16 total with #e0e0e0) */
  --color-neutral-300: #dddddd;
  /* #94a3b8: 24 uses */
  --color-neutral-400: #94a3b8;
  /* #64748b: 16 uses */
  --color-neutral-500: #64748b;
  /* #475569: 18 uses */
  --color-neutral-600: #475569;
  /* default - interpolated, no single inventory source above 10 uses */
  --color-neutral-700: #334155;
  /* #1a1f3a: 23 uses */
  --color-neutral-800: #1a1f3a;
  /* #001f3f: 22 uses (same as brand-primary-hover) */
  --color-neutral-900: #001f3f;

  /* Dark-section palette (hero/dark bg colors from inventory) */
  /* #1a1a24: 11 uses (cluster 15 total) */
  --color-dark-bg: #1a1a24;
  /* #9999bb: 14 uses - muted text on dark bg */
  --color-dark-text-muted: #9999bb;
  /* #6b6b8a: 13 uses - secondary text on dark bg */
  --color-dark-text-secondary: #6b6b8a;

  /* Semantic */
  /* #00c896: 23 uses (cluster 25 total) */
  --color-success: #00c896;
  /* #f0fdf4: 11 uses (cluster 17 total) */
  --color-success-bg: #f0fdf4;
  /* #f0c040: 33 uses */
  --color-warning: #f0c040;
  /* #fff3e0: 9 uses (cluster 13 total) */
  --color-warning-bg: #fff3e0;
  /* #ff4444: 10 uses */
  --color-error: #ff4444;
  /* default - not derived from inventory, no clear source found */
  --color-error-bg: #fee2e2;
  /* #0077b6: 39 uses (same as brand-secondary) */
  --color-info: #0077b6;
  /* default - not derived from inventory, no clear source found */
  --color-info-bg: #e0f2fe;

  /* Surfaces */
  /* #ffffff: 280 uses - dominant */
  --color-surface-page: #ffffff;
  --color-surface-card: #ffffff;
  /* #fdf8f0: 8 uses (warm off-white cluster 29 total) */
  --color-surface-elevated: #fdf8f0;

  /* Text */
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);

  /* Focus */
  --color-focus-ring: var(--color-brand-primary);
}

/* ============================================ */
/* TYPOGRAPHY TOKENS - derived from inventory   */
/* ============================================ */

:root {
  /* Font families - derived from Phase A.2 frequency analysis */
  /* 'DM Sans': 137 uses across pages - dominant body font */
  --font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 'Playfair Display': 66 uses - dominant heading font */
  --font-family-heading: 'Playfair Display', 'DM Sans', Georgia, serif;
  /* 'Syne': 34 uses - display/hero font */
  --font-family-display: 'Syne', 'DM Sans', -apple-system, sans-serif;
  /* 'Nunito': 4 uses - young learner font */
  --font-family-young: 'Nunito', 'DM Sans', -apple-system, sans-serif;
  /* 'JetBrains Mono': 8 uses - monospace font */
  --font-family-mono: 'JetBrains Mono', monospace;
  /* 'Libre Baskerville': 4 uses - legal/formal heading font (NEW in D2a-rev1) */
  --font-family-legal-heading: 'Libre Baskerville', Georgia, serif;
  /* 'Source Sans 3': 3 uses - legal/formal body font (NEW in D2a-rev1) */
  --font-family-legal-body: 'Source Sans 3', 'DM Sans', -apple-system, sans-serif;

  /* Font sizes - modular scale 1.125 */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  30px;
  --font-size-3xl:  36px;
  --font-size-4xl:  48px;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}

/* ============================================ */
/* SPACING SCALE - 4px base                     */
/* Top inventory values: 12px(417), 16px(351),  */
/* 8px(340), 20px(325), 10px(313), 4px(215),   */
/* 24px(200), 6px(184)                          */
/* ============================================ */

:root {
  --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;
  --space-20: 80px;
  --space-24: 96px;
}

/* ============================================ */
/* BORDER RADIUS                                */
/* ============================================ */

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-full: 9999px;
}

/* ============================================ */
/* SHADOWS                                      */
/* ============================================ */

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 61, 107, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 61, 107, 0.18);
  --shadow-card: 0 8px 32px rgba(26, 31, 58, 0.1);
  --shadow-focus: 0 0 0 3px rgba(0, 61, 107, 0.4);
}

/* ============================================ */
/* TAP TARGETS - WCAG compliant                 */
/* ============================================ */

:root {
  --tap-target-min: 44px;       /* WCAG 2.1 AAA */
  --tap-target-floor: 24px;     /* WCAG 2.2 AA mandatory */
}

.tap-target {
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
}

/* Apply to specific failing selectors flagged by D11-verify */
.notif-dd-header button,
.resend-row button {
  min-height: var(--tap-target-min);
}

/* ============================================ */
/* TRANSITION TIMING                            */
/* ============================================ */

:root {
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ============================================ */
/* YEAR-ADAPTIVE OVERRIDES                      */
/* (preserves D5/D8b body.young behavior)      */
/* ============================================ */

body.young {
  --font-family-body: var(--font-family-young);
  --font-size-base: 18px;
  --tap-target-min: 56px;
}

/* ============================================ */
/* CAREER THEME VARIANTS                        */
/* (preserves D8c dream-bar theme system)      */
/* These are accent-color overrides only - they */
/* swap brand-accent based on chosen career.    */
/* ============================================ */

body[data-theme="medical"] { --color-brand-accent: #ef4444; }
body[data-theme="education"] { --color-brand-accent: #f0c040; }
body[data-theme="engineer"] { --color-brand-accent: #6b7280; }
body[data-theme="hospitality"] { --color-brand-accent: #ec4899; }
body[data-theme="farmer"] { --color-brand-accent: #00c896; }
body[data-theme="soldier"] { --color-brand-accent: #4d7c0f; }
body[data-theme="police"] { --color-brand-accent: #003d6b; }
body[data-theme="pilot"] { --color-brand-accent: #0ea5e9; }
body[data-theme="business"] { --color-brand-accent: #7c2d12; }
body[data-theme="rugby"] { --color-brand-accent: #dc2626; }
body[data-theme="arts"] { --color-brand-accent: #a855f7; }

/* ============================================ */
/* UTILITY CLASSES                              */
/* (use sparingly - prefer tokens in component  */
/* CSS over utility class proliferation)        */
/* ============================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================ */
/* REV2 EXTRAS - page-level colors (3+ uses)   */
/* ============================================ */

:root {
  /* #e8714a: 52 uses - warm accent/CTA (alias of brand-accent) */
  --color-extra-accent-warm: #e8714a;
  /* #888888: 10 uses - mid gray */
  --color-extra-gray-mid: #888888;
  /* #cc2200: 10 uses - deep red/error alt */
  --color-extra-red-deep: #cc2200;
  /* #5a6a7a: 9 uses - cool gray text */
  --color-extra-gray-cool: #5a6a7a;
  /* #1a8a40: 9 uses - dark green */
  --color-extra-green-dark: #1a8a40;
  /* #44ee88: 9 uses - bright green */
  --color-extra-green-bright: #44ee88;
  /* #555555: 9 uses - dark gray */
  --color-extra-gray-dark: #555555;
  /* #1a2332: 8 uses - navy dark bg */
  --color-extra-navy-dark: #1a2332;
  /* #2ecc71: 8 uses - emerald green */
  --color-extra-green-emerald: #2ecc71;
  /* #111118: 7 uses - near-black */
  --color-extra-black-soft: #111118;
  /* #f5ede0: 7 uses - warm cream */
  --color-extra-cream-warm: #f5ede0;
  /* #1a5c2a: 7 uses - forest green */
  --color-extra-green-forest: #1a5c2a;
  /* #8b6000: 7 uses - dark gold */
  --color-extra-gold-dark: #8b6000;
  /* #666666: 7 uses - medium gray */
  --color-extra-gray-medium: #666666;
  /* #f8f6f2: 7 uses - warm white */
  --color-extra-white-warm: #f8f6f2;
  /* #0a0a0f: 6 uses - near-black alt */
  --color-extra-black-deep: #0a0a0f;
  /* #00b4d8: 6 uses - light blue */
  --color-extra-blue-light: #00b4d8;
  /* #e8f4ff: 6 uses - ice blue bg */
  --color-extra-blue-ice: #e8f4ff;
  /* #e0e0e0: 6 uses - light border gray */
  --color-extra-gray-border: #e0e0e0;
  /* #eff6ff: 6 uses - blue tint bg */
  --color-extra-blue-tint: #eff6ff;
  /* #065f46: 6 uses - deep teal */
  --color-extra-teal-deep: #065f46;
  /* #ff6b47: 5 uses - salmon/coral */
  --color-extra-coral-light: #ff6b47;
  /* #0055dd: 5 uses - strong blue */
  --color-extra-blue-strong: #0055dd;
}

/* ============================================ */
/* END TUTOR DESIGN SYSTEM                      */
/* ============================================ */

/* ============================================ */
/* REV3 EXTRAS - sweep-all additions           */
/* Added 2026-04-20 for D2-SWEEP-ALL coverage  */
/* ============================================ */

:root {
  --color-sweep-01: #c84020;  /* 4 uses */
  --color-sweep-02: #002a4a;  /* 4 uses */
  --color-sweep-03: #0f1923;  /* 3 uses */
  --color-sweep-04: #ffd700;  /* 3 uses */
  --color-sweep-05: #ff6b6b;  /* 3 uses */
  --color-sweep-06: #1a6b3a;  /* 3 uses */
  --color-sweep-07: #001a08;  /* 3 uses */
  --color-sweep-08: #856404;  /* 3 uses */
  --color-sweep-09: #155724;  /* 3 uses */
  --color-sweep-10: #00e676;  /* 2 uses */
  --color-sweep-11: #8b2800;  /* 2 uses */
  --color-sweep-12: #804000;  /* 2 uses */
  --color-sweep-13: #222230;  /* 2 uses */
}

/* Theme-specific accent tokens for family.html variants */
:root {
  --color-family-young-accent: #2d1b69;
  --color-family-adventure-accent: #00c49a;
  --color-family-doctor-accent: #0096c7;
  --color-family-engineer-accent: #1c0a00;
  --color-family-rugby-accent: #002d1a;
  --color-family-business-accent: #1a002e;
  --color-family-arts-accent: #1a0800;
}
