/* ==========================================================================
   MRCOG Academy — Design Tokens
   Palette derived from the reference dashboard, reinterpreted for
   postgraduate Obstetrics & Gynaecology education:
   deep plum primary, restrained gold accent, warm ivory surfaces.
   ========================================================================== */

:root {
  /* ---------- Brand ---------- */
  --plum-900: #2A0F24;
  --plum-800: #38152F;
  --plum-700: #4A1D3F;
  --plum-600: #5E2A51;
  --plum-500: #743865;
  --plum-400: #8E567F;
  --plum-300: #B189A5;
  --plum-200: #D7BFD0;
  --plum-100: #EDDFE8;
  --plum-050: #F8F0F5;

  --gold-700: #8A6A3C;
  --gold-600: #A5803F;
  --gold-500: #B08D57;
  --gold-400: #C7A879;
  --gold-300: #DFC9A4;
  --gold-100: #F2E7D4;

  --rose-600: #9E4A5C;
  --rose-500: #B26E75;
  --rose-200: #E8CFD3;
  --rose-100: #F6EAEC;

  /* ---------- Neutrals ---------- */
  --ink-900: #1E1A22;
  --ink-800: #2C2731;
  --ink-700: #3D3745;
  --ink-600: #554E5E;
  --ink-500: #6E6678;
  --ink-400: #8E8797;
  --ink-300: #B4AEBC;
  --ink-200: #D8D3DE;
  --ink-100: #EBE7EF;
  --ink-050: #F5F3F7;

  --ivory: #FBF8F4;
  --ivory-dim: #F4EFE8;
  --white: #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --surface-page: var(--ivory);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-050);
  --surface-inverse: var(--plum-900);
  --surface-accent-soft: var(--plum-050);

  --border-subtle: #E7E1E9;
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-on-dark: #F6F1F4;
  --text-on-dark-muted: #C9BAC4;

  /* ---------- Status / access states ---------- */
  --state-included: #2F6F5E;          /* included with subscription */
  --state-included-bg: #E6F1ED;
  --state-included-border: #BFDCD2;

  --state-preview: #2B5F8A;           /* free preview */
  --state-preview-bg: #E7F0F7;
  --state-preview-border: #C3DAEA;

  --state-owned: var(--gold-700);     /* separately purchased */
  --state-owned-bg: var(--gold-100);
  --state-owned-border: var(--gold-300);

  --state-locked: var(--ink-500);     /* locked */
  --state-locked-bg: var(--ink-050);
  --state-locked-border: var(--ink-200);

  --state-correct: #226B4E;
  --state-correct-bg: #E4F1EA;
  --state-correct-border: #B4D8C6;

  --state-incorrect: #9B2C2C;
  --state-incorrect-bg: #FBEAEA;
  --state-incorrect-border: #EFC7C7;

  --state-warning: #8A5A11;
  --state-warning-bg: #FCF2DF;
  --state-warning-border: #EBD5A8;

  --state-complete: #2F6F5E;
  --state-info-bg: var(--plum-050);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-3xs: 0.6875rem;  /* 11px  — micro labels */
  --fs-2xs: 0.75rem;    /* 12px  — metadata */
  --fs-xs: 0.8125rem;   /* 13px  */
  --fs-sm: 0.875rem;    /* 14px  */
  --fs-base: 1rem;      /* 16px  — body minimum */
  --fs-md: 1.0625rem;   /* 17px  — long-form reading */
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.875rem;
  --fs-5xl: 3.5rem;

  --lh-tight: 1.14;
  --lh-snug: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.72;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.10em;

  /* ---------- Spacing (4px rhythm) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6.5rem;

  --section-y: clamp(3.5rem, 6vw, 6.5rem);
  --section-y-tight: clamp(2.5rem, 4vw, 4rem);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --container-form: 520px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --header-h: 72px;
  --sidebar-w: 264px;

  /* ---------- Radii ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(30, 26, 34, 0.05);
  --shadow-sm: 0 1px 3px rgba(30, 26, 34, 0.07), 0 1px 2px rgba(30, 26, 34, 0.04);
  --shadow-md: 0 4px 14px rgba(42, 15, 36, 0.07), 0 1px 3px rgba(42, 15, 36, 0.05);
  --shadow-lg: 0 14px 40px rgba(42, 15, 36, 0.10), 0 3px 10px rgba(42, 15, 36, 0.05);
  --shadow-xl: 0 28px 70px rgba(42, 15, 36, 0.16), 0 6px 18px rgba(42, 15, 36, 0.07);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring-focus: 0 0 0 3px rgba(176, 141, 87, 0.45);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 340ms;

  /* ---------- Decorative ---------- */
  --grad-plum: linear-gradient(135deg, var(--plum-800) 0%, var(--plum-600) 55%, #6B2F55 100%);
  --grad-plum-deep: linear-gradient(160deg, #240C1F 0%, var(--plum-700) 70%, #632B54 100%);
  --grad-gold: linear-gradient(120deg, var(--gold-600), var(--gold-400));
  --grad-ivory: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-dim) 100%);
  --grad-scan: linear-gradient(200deg, #1B2A33 0%, #2E4450 45%, #47606D 100%);
  --z-header: 100;
  --z-overlay: 200;
}