:root {
  /* ── L1 PRIMITIVES ── */

  /* Blues */
  --prim-blue-flag: #0062b8;
  --prim-blue-dark: #00488a;
  --prim-blue-deep: #003370;
  --prim-blue-mid: #0077d4;
  --prim-blue-text: #0d2a5c;
  --prim-blue-muted: #4a6890;
  --prim-blue-body: #1a3060;
  --prim-blue-tint: #f0f5ff;
  --prim-blue-sky: #a6d7ff;
  --prim-blue-sky-dark: #7ec0f0;
  --prim-blue-avatar: #c8e4f8;
  --prim-blue-avatar-light: #e4f2fc;

  /* Cream */
  --prim-cream: #fffaf0;

  /* Glass - white-alpha stops on dark blue backgrounds */
  --prim-glass: rgba(255, 255, 255, 0.14);
  --prim-glass-sm: rgba(255, 255, 255, 0.12);
  --prim-glass-md: rgba(255, 255, 255, 0.22);
  --prim-glass-sep: rgba(255, 255, 255, 0.18);
  --prim-glass-sub: rgba(255, 255, 255, 0.25);
  --prim-glass-text: rgba(255, 255, 255, 0.85);
  --prim-glass-card: rgba(255, 255, 255, 0.88);
  --prim-glass-border: rgba(255, 255, 255, 0.35);
  --prim-card-border: rgba(255, 255, 255, 0.70);
  --prim-white-muted: rgba(255, 255, 255, 0.60);

  /* Neutrals - white-background context */
  --prim-neutral-50: #f9fafb;
  --prim-neutral-100: #f3f4f6;
  --prim-neutral-200: #e5e7eb;
  --prim-neutral-300: #d1d5db;
  --prim-neutral-400: #9ca3af;
  --prim-neutral-500: #6b7280;
  --prim-neutral-600: #4b5563;
  --prim-neutral-700: #374151;
  --prim-neutral-800: #1f2937;
  --prim-neutral-900: #111827;

  /* Shadows - blue context */
  --shadow-blue-sm: rgba(0, 30, 100, 0.12);
  --shadow-blue-md: rgba(0, 30, 100, 0.20);
  --shadow-blue-lg: rgba(0, 30, 100, 0.28);

  /* Shadows - neutral context */
  --shadow-sm: rgba(0, 0, 0, 0.05);
  --shadow-md: rgba(0, 0, 0, 0.15);
  --shadow-lg: rgba(0, 0, 0, 0.25);

  /* Gradient */
  --gradient-flag: linear-gradient(
    160deg,
    rgba(0, 88, 168, 0.52) 0%,
    rgba(0, 114, 200, 0.75) 35%,
    rgba(0, 98, 184, 0.80) 65%,
    rgba(0, 78, 154, 0.85) 100%
  );

  /* Spacing scale (8px base) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Semantic spacing aliases */
  --space-section: var(--space-xl);
  --space-block: var(--space-m);
  --space-inline: var(--space-xxs);
  --space-screen-pad: 20px;

  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;

  /* ── L2 SEMANTIC (M3 color roles) ── */

  --color-primary: var(--prim-blue-flag);

  --color-on-primary: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: rgba(255, 255, 255, 0.92);
  --color-surface-container: var(--prim-glass-card);
  --color-on-surface: var(--prim-blue-text);
  --color-on-surface-variant: var(--prim-blue-muted);
  --color-outline: var(--prim-glass-border);
  --color-outline-variant: rgba(0, 80, 180, 0.10);

  /* Named semantic roles */
  --color-nav: rgba(0, 60, 130, 0.65);
  --color-heading: var(--prim-blue-deep);
  --color-muted: var(--prim-white-muted);
  --color-badge-text: #d4eeff;

  /* Glass surface hierarchy - semantic aliases for L1 glass primitives */
  --color-glass-overlay: var(--prim-glass);
  --color-glass-surface: var(--prim-glass-sm);
  --color-glass-hover: var(--prim-glass-md);
  --color-glass-sep: var(--prim-glass-sep);
  --color-glass-border: var(--prim-glass-sub);
  --color-glass-text: var(--prim-glass-text);
  --color-placeholder: var(--prim-glass-border);

  /* Content & media */
  --color-card-border: var(--prim-card-border);
  --color-on-surface-strong: var(--prim-blue-dark);
  --color-prose: var(--prim-blue-body);
  --color-media-bg: var(--prim-blue-deep);
  --color-avatar-bg: linear-gradient(135deg, var(--prim-blue-avatar) 0%, var(--prim-blue-avatar-light) 100%);

  /* Typography */
  --font-mono: monospace;

  /* Modal */
  --color-modal-backdrop: rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Editor */
  --editor-surface: var(--prim-blue-tint);

  /* Status colors (M3 extended) */
  --color-success-container: #dcfce7;
  --color-on-success-container: #15803d;
  --color-success-border: #86efac;
  --color-info-container: #dbeafe;
  --color-on-info-container: #1d4ed8;
  --color-info-border: #bfdbfe;
  --color-warning-container: #fef3c7;
  --color-on-warning-container: #b45309;
  --color-warning-border: rgba(200, 150, 0, 0.30);
  --color-error-container: #fef2f2;
  --color-on-error-container: #b91c1c;
  --color-error-border: #fecaca;
  --color-error-input-border: #751010;
  --color-error-focus: #dc2626;
  --color-caution-container: #ffedd5;
  --color-on-caution-container: #c2410c;

  /* ── ADMIN SEMANTIC ROLES ── */

  --admin-ink: var(--prim-neutral-900);
  --admin-ink-hover: var(--prim-neutral-800);
  --admin-ink-label: var(--prim-neutral-700);
  --admin-ink-secondary: var(--prim-neutral-600);
  --admin-ink-tertiary: var(--prim-neutral-500);
  --admin-ink-hint: var(--prim-neutral-400);
  --admin-surface-tint: var(--prim-neutral-50);
  --admin-surface-subtle: var(--prim-neutral-100);
  --admin-border: var(--prim-neutral-200);
  --admin-border-input: var(--prim-neutral-300);
  --admin-border-row: var(--prim-neutral-100);
  /* Fixed square so every icon button is the same width and edit/delete
     line up across rows regardless of the optional external-link button */
  --admin-icon-btn-size: 28px;

  /* ── EDITOR TOKENS ── */

  --editor-border: rgba(0, 98, 184, 0.20);
  --editor-tint-active: rgba(0, 98, 184, 0.12);
  --editor-tint-subtle: rgba(0, 98, 184, 0.06);

  /* ── COMPOSER DETAIL STAT ── */
  --detail-stat-height: 120px;

  /* ── STAT CATEGORY TOKENS ── */

  --stat-biography-icon: #9ab8d8;

  --stat-works-icon: #9ed8b8;
  --stat-works-bg: #c0eacf;
  --stat-works-num: #1a8040;

  --stat-videos-icon: #ffaaaa;
  --stat-videos-bg: #ffd0d0;
  --stat-videos-num: #cc1a1a;

  --stat-recordings-icon: #ffbf96;
  --stat-recordings-bg: #ffd8b8;
  --stat-recordings-num: #d05418;

  --stat-scores-icon: #f0d87a;
  --stat-scores-bg: #f9ebc2;
  --stat-scores-num: #8a6200;

  --stat-photos-icon: #c0b0ff;
  --stat-photos-bg: #d8d0ff;
  --stat-photos-num: #4433bb;

  --stat-zero-num: #7a8aaa;

  /* ── BUTTON TOKENS ── */

  --btn-primary: var(--prim-blue-flag);
  --btn-primary-hover: var(--prim-blue-mid);
  --btn-primary-text: #ffffff;
  --btn-secondary: var(--prim-blue-sky);
  --btn-secondary-hover: var(--prim-blue-sky-dark);
  --btn-secondary-text: var(--prim-blue-text);
  --btn-danger: #b91c1c;
  --btn-danger-hover: #dc2626;
  --btn-danger-text: #ffffff;
  --btn-view: #249115;
  --btn-view-hover: #1d7a11;
  --btn-view-text: #ffffff;
}