/* Rushmore Academy design tokens. Parchment and ink, one antique gold, a restrained oxblood for honors.
   Light is the default. Dark follows the system unless the settings panel pins a theme with data-theme.
   Every pair used for text is measured in the brand note (all at or above WCAG AA, most at AAA). */

@font-face { font-family: 'Rushmore Display'; src: url('/design/fonts/Cinzel-var.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Rushmore Heading'; src: url('/design/fonts/CormorantGaramond-var.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rushmore Heading'; src: url('/design/fonts/CormorantGaramond-Italic-var.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Rushmore Text'; src: url('/design/fonts/EBGaramond-var.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rushmore Text'; src: url('/design/fonts/EBGaramond-Italic-var.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Rushmore UI'; src: url('/design/fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Rushmore Clear'; src: url('/design/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rushmore Clear'; src: url('/design/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  /* Palette: light */
  --parchment: #F4EFE4;        /* page */
  --parchment-deep: #EBE4D3;   /* alternate bands, wells */
  --vellum: #FBF8F1;           /* cards */
  --ink: #15202B;              /* text, primary fills */
  --ink-soft: #334050;         /* secondary text */
  --granite: #5A6470;          /* muted text, 5.25:1 on parchment */
  --line: #D6CCB6;             /* hairlines */
  --line-strong: #B9AD93;
  --gold: #A1782B;             /* antique gold for outlines and marks (3.5:1 on parchment) */
  --gold-text: #7A5A1E;        /* gold as text, 5.5:1 */
  --gold-bright: #D4AC55;      /* highlights on dark fields only */
  --oxblood: #6E1E22;          /* honors, 9.8:1 */
  --oxblood-ink: #FFFFFF;
  --ok: #24633A;
  --no: #8A3612;
  --focus: #1F4E79;

  --bg: var(--parchment);
  --bg-alt: var(--parchment-deep);
  --card: var(--vellum);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --muted: var(--granite);
  --primary: var(--ink);
  --primary-ink: var(--parchment);
  --link: #1F4E79;

  /* Type: Roman capitals for inscriptions, a Garamond for headings and reading, a quiet sans for interface */
  --font-display: 'Rushmore Display', 'Trajan Pro', 'Cinzel', Georgia, serif;
  --font-heading: 'Rushmore Heading', 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-text: 'Rushmore Text', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-ui: 'Rushmore UI', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-reading: var(--font-text);
  --text-scale: 1;
  --fs-0: calc(0.8125rem * var(--text-scale));   /* 13: captions */
  --fs-1: calc(0.9375rem * var(--text-scale));   /* 15: UI */
  --fs-2: calc(1.125rem * var(--text-scale));    /* 18: body */
  --fs-3: calc(1.375rem * var(--text-scale));    /* 22: lead */
  --fs-4: calc(1.75rem * var(--text-scale));     /* 28: h2 */
  --fs-5: calc(2.25rem * var(--text-scale));     /* 36: h1 */
  --fs-6: calc(3rem * var(--text-scale));        /* 48: display */
  --fs-7: calc(4.25rem * var(--text-scale));     /* 68: monumental */
  --lh-tight: 1.1;
  --lh-body: 1.55;
  --track-caps: 0.18em;

  /* Layout: one container, one gutter, three measures. Everything centers on the same axis. */
  --gutter: clamp(20px, 5vw, 72px);
  --container: 1200px;        /* grids, explorers, plans */
  --reading: 720px;           /* running text */
  --narrow: 620px;            /* centered section heads and single sentences */
  --measure: 66ch;
  --content: var(--reading);  /* app pages */

  /* Space (an 8 px rhythm) and shape (nearly square: hairlines, not pills) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --section: clamp(88px, 11vw, 168px);   /* between sections */
  --block: clamp(40px, 5vw, 72px);       /* between a section head and its body */
  --r-1: 2px; --r-2: 2px; --r-3: 3px; --r-pill: 999px;

  /* Elevation: hairlines carry the structure; shadows are rare and soft */
  --shadow-1: 0 0 0 1px var(--line);
  --shadow-2: 0 0 0 1px var(--line), 0 12px 32px -20px rgba(21, 32, 43, .25);
  --shadow-3: 0 0 0 1px var(--line-strong), 0 32px 64px -32px rgba(21, 32, 43, .35);

  /* Motion: slow and even */
  --t-fast: 160ms; --t-base: 320ms; --t-slow: 900ms; --t-ceremony: 2600ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-ceremony: cubic-bezier(.4, 0, .1, 1);
  --motion: 1; /* 0 when motion is reduced */
}

/* Dark: night granite */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E141B; --bg-alt: #121A23; --card: #182230;
    --text: #EDE6D6; --text-soft: #D3CBBA; --muted: #ABB4BE;
    --line: #2C3845; --line-strong: #3C4A59;
    --gold: #C9A24E; --gold-text: #DDB65E; --gold-bright: #E8C56C;
    --oxblood: #E59A9E; --oxblood-ink: #0E141B;
    --ok: #7FD39A; --no: #F2B07C; --focus: #8FB8DE; --link: #8FB8DE;
    --primary: #EDE6D6; --primary-ink: #0E141B;
    --shadow-1: 0 0 0 1px var(--line);
    --shadow-2: 0 0 0 1px var(--line), 0 12px 32px -20px rgba(0, 0, 0, .6);
    --shadow-3: 0 0 0 1px var(--line-strong), 0 32px 64px -32px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E141B; --bg-alt: #121A23; --card: #182230;
  --text: #EDE6D6; --text-soft: #D3CBBA; --muted: #ABB4BE;
  --line: #2C3845; --line-strong: #3C4A59;
  --gold: #C9A24E; --gold-text: #DDB65E; --gold-bright: #E8C56C;
  --oxblood: #E59A9E; --oxblood-ink: #0E141B;
  --ok: #7FD39A; --no: #F2B07C; --focus: #8FB8DE; --link: #8FB8DE;
  --primary: #EDE6D6; --primary-ink: #0E141B;
  --shadow-1: 0 0 0 1px var(--line);
  --shadow-2: 0 0 0 1px var(--line), 0 12px 32px -20px rgba(0, 0, 0, .6);
  --shadow-3: 0 0 0 1px var(--line-strong), 0 32px 64px -32px rgba(0, 0, 0, .7);
}

/* Reader settings (persisted by motion.js on the html element) */
:root[data-text="large"] { --text-scale: 1.2; }
:root[data-font="dyslexia"] { --font-reading: 'Rushmore Clear', 'Atkinson Hyperlegible', Verdana, sans-serif; --font-text: var(--font-reading); --font-ui: var(--font-reading); --font-display: var(--font-reading); --font-heading: var(--font-reading); --track-caps: 0.06em; }
/* High contrast: pure black on white (or white on black when the theme is dark). Declared after the themes so it wins. */
:root[data-contrast="high"] { --bg: #FFFFFF; --bg-alt: #F2F2F2; --card: #FFFFFF; --text: #000000; --text-soft: #111111; --muted: #2A2A2A; --line: #000000; --line-strong: #000000; --gold: #5A4000; --gold-text: #4A3400; --link: #0000B0; --focus: #0000B0; --ok: #005A1E; --no: #8A0000; --oxblood: #5A0010; --oxblood-ink: #FFFFFF; --primary: #000000; --primary-ink: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) { --bg: #000000; --bg-alt: #0A0A0A; --card: #000000; --text: #FFFFFF; --text-soft: #F5F5F5; --muted: #E6E6E6; --line: #FFFFFF; --line-strong: #FFFFFF; --gold: #FFD866; --gold-text: #FFD866; --link: #9ED0FF; --focus: #9ED0FF; --ok: #8CF0A8; --no: #FFC08A; --oxblood: #FFB0B4; --oxblood-ink: #000000; --primary: #FFFFFF; --primary-ink: #000000; }
}
:root[data-contrast="high"][data-theme="dark"] { --bg: #000000; --bg-alt: #0A0A0A; --card: #000000; --text: #FFFFFF; --text-soft: #F5F5F5; --muted: #E6E6E6; --line: #FFFFFF; --line-strong: #FFFFFF; --gold: #FFD866; --gold-text: #FFD866; --link: #9ED0FF; --focus: #9ED0FF; --ok: #8CF0A8; --no: #FFC08A; --oxblood: #FFB0B4; --oxblood-ink: #000000; --primary: #FFFFFF; --primary-ink: #000000; }

@media (prefers-reduced-motion: reduce) { :root { --motion: 0; --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-ceremony: 0ms; } }
:root[data-motion="reduce"] { --motion: 0; --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-ceremony: 0ms; }

/* Tablets (an iPad mini in portrait up to an iPad in landscape): a slightly larger reading size, so the extra width is used by type, not by empty margins. */
@media (min-width: 740px) and (max-width: 1180px) { :root { --fs-2: calc(1.1875rem * var(--text-scale)); --fs-3: calc(1.4375rem * var(--text-scale)); } }