/* Mayfair Scholars – design tokens. Every colour, size and radius used by the theme comes from here. */
:root {
  /* ── Brand colours ── */
  --color-primary: #0B1B3D;          /* Navy */
  --color-primary-hover: #1C3B2B;    /* Forest (button hover) */
  --color-secondary: #1C3B2B;        /* Forest */
  --color-accent: #C5A059;           /* Decorative gold; large text on navy; button background with navy text */
  --color-accent-hover: #B8914A;     /* Gold button hover (navy text 5.7:1) */
  --color-accent-dark: #8A6A2F;      /* Gold TEXT on light backgrounds (5.02:1 white, 4.77:1 ivory) */
  --color-accent-soft: #F5EEDF;      /* Tint for chips/panels (navy text on it) */

  /* ── Surfaces ── */
  --color-bg-white: #FFFFFF;
  --color-bg-ivory: #FAF9F6;
  --color-bg-light-gray: #F3F4F6;
  --color-placeholder: #E9ECF1;

  /* ── Text ── */
  --color-text-main: #1F2937;        /* Body text */
  --color-text-muted: #4B5563;       /* Secondary text (7.56:1) */
  --color-text-subtle: #6B7280;      /* Meta text (4.83:1; replaces #9CA3AF) */
  --color-text-light: #F9FAFB;       /* Text on navy */
  --color-text-on-dark-muted: #C9CED8; /* Secondary text on navy (10.6:1) */

  /* ── Lines and focus ── */
  --color-border: #E5E7EB;           /* Decorative borders */
  --color-border-strong: #7C8594;    /* Input borders (3.72:1) */
  --color-border-on-dark: rgba(255, 255, 255, 0.18);
  --color-focus: #0B1B3D;            /* Focus ring on light backgrounds */
  --color-focus-on-dark: #C5A059;    /* Focus ring on navy */
  --color-link: #0B1B3D;
  --color-link-hover: #8A6A2F;

  /* ── Status ── */
  --color-success-bg: #ECFDF5;
  --color-success-text: #065F46;
  --color-success-border: #A7F3D0;
  --color-error-bg: #FEF2F2;
  --color-error-text: #991B1B;
  --color-error-border: #FECACA;

  /* ── Typography ── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.75rem;                                        /* 12px */
  --text-sm: 0.875rem;                                       /* 14px */
  --text-base: 1rem;                                         /* 16px */
  --text-md: 1.0625rem;                                      /* 17px */
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);        /* 17–20px */
  --text-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);     /* 18–22px */
  --text-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* 20–24px */
  --text-3xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);         /* 24–40px */
  --text-4xl: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);          /* 28–48px */
  --text-5xl: clamp(1.875rem, 1.4rem + 2.4vw, 3.5rem);       /* 30–56px */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --measure: 68ch;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* Legacy aliases (templates still use these; keep until Stage 2 removes inline styles) */
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-4);
  --spacing-md: var(--space-6);
  --spacing-lg: var(--space-8);
  --spacing-xl: var(--space-9);

  /* ── Layout ── */
  --max-width: 1200px;
  --topbar-h: 44px;
  --header-h: 72px;
  --actionbar-h: 64px;

  /* ── Shape ── */
  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-card: 14px;
  --radius-pill: 9999px;
  --border-radius: var(--radius-card);        /* legacy alias */
  --border-radius-pill: var(--radius-pill);   /* legacy alias */

  /* ── Elevation ── */
  --shadow-sm: 0 2px 8px 0 rgba(11, 27, 61, 0.06);
  --shadow-md: 0 12px 28px -6px rgba(11, 27, 61, 0.14);
  --shadow-lg: 0 24px 48px -12px rgba(11, 27, 61, 0.2);
  --shadow-glow: 0 12px 32px -12px rgba(197, 160, 89, 0.55);
  --shadow-gold: var(--shadow-glow);          /* alias (was undefined before) */

  /* ── Motion ── */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-normal: 0.35s var(--ease);

  /* ── Layers ── */
  --z-header: 100;
  --z-actionbar: 90;
  --z-panel: 1000;
  --z-skip: 2000;
}