/* =========================================================================
   THE ACADEMY OF MUSIC — DESIGN TOKENS (theme.css)
   =========================================================================
   Token values are taken verbatim from the canonical design system:
   design-system/the-academy-of-music-design-system/project/tokens/
   (colors.css, typography.css, spacing.css). If the design system changes,
   update here from there — never invent values in main.css.

   Brand in one line: engraved concert programme on warm paper — navy ink,
   brass accents, cream page, Cormorant Garamond over Source Sans 3,
   hairline rules, no gradients, no emoji.

   Lauren's art direction cues honoured here: grounded, earthen, zen,
   kid-centric → cream-first surfaces, terracotta as the sparing warm
   accent for children's moments, generous space, composed motion.

   TO RE-THEME: this file is still the single migration point — override
   any token in a [data-theme="…"] block and set it in js/config.js.
   ========================================================================= */

:root {
  /* ---- Navy (primary ink) ---- */
  --navy-950: #0C1528;
  --navy-900: #142039;  /* primary brand navy */
  --navy-800: #1B2A4A;
  --navy-700: #27375C;
  --navy-600: #36486F;
  --navy-500: #4A5C84;
  --navy-400: #6E7EA1;
  --navy-300: #9AA7C2;
  --navy-200: #C3CCDE;
  --navy-100: #DFE4EF;
  --navy-050: #F0F3F9;

  /* ---- Brass (accent metal) ---- */
  --brass-700: #8A672A;
  --brass-600: #A37B33;
  --brass-500: #BC923F;  /* primary brass */
  --brass-400: #CFA95E;
  --brass-300: #DFC289;
  --brass-200: #ECD9B4;
  --brass-100: #F5EBD5;

  /* ---- Cream (paper) ---- */
  --cream-050: #FCFAF4;  /* page */
  --cream-100: #F7F2E7;
  --cream-200: #EFE7D4;
  --cream-300: #E2D6BC;

  /* ---- Ink neutrals (navy-tinted) ---- */
  --ink-900: #1A2233;
  --ink-700: #333D52;
  --ink-500: #5B647A;
  --ink-400: #7B8398;
  --ink-300: #A7ADBD;

  /* ---- Terracotta (sparing warm accent — the earthen, kid-centric note) ---- */
  --terracotta-600: #A84A36;
  --terracotta-500: #BE5B45;
  --terracotta-100: #F6E3DE;

  /* ---- Semantic status ---- */
  --green-600: #2E7D5B;
  --green-100: #E0EFE8;
  --amber-600: #A86B1F;
  --amber-100: #F6EBD8;
  --red-600: #AE4434;
  --red-100: #F7E4E0;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--cream-050);
  --surface-card: #FFFFFF;
  --surface-sunken: var(--cream-100);
  --surface-inverse: var(--navy-900);
  --surface-inverse-raised: var(--navy-800);

  --text-heading: var(--navy-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-dark: var(--cream-100);
  --text-on-dark-muted: var(--navy-300);
  --text-brass: var(--brass-600);
  --text-link: var(--navy-700);

  --accent: var(--brass-500);
  --accent-strong: var(--brass-600);
  --accent-soft: var(--brass-100);

  --border-soft: #E7DFCC;
  --border-strong: #D5CBB1;
  --border-on-dark: rgba(245, 235, 213, 0.18);

  --button-primary-bg: var(--navy-900);
  --button-primary-bg-hover: var(--navy-800);
  --button-primary-fg: var(--cream-100);

  --focus-ring: 0 0 0 2px var(--cream-050), 0 0 0 4px var(--brass-500);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.3125rem;   /* 21 — smallest display size */
  --text-xl: 1.625rem;    /* 26 — card titles, H3 */
  --text-2xl: 2rem;       /* 32 — H2 */
  --text-3xl: 2.5rem;     /* 40 — H1 */
  --text-4xl: 3.25rem;    /* 52 — hero */
  --text-5xl: 4rem;       /* 64 — display hero */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.55;

  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.14em;

  --eyebrow-size: 0.8125rem;
  --eyebrow-weight: 600;

  /* ---- Spacing (4px grid) ---- */
  --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;

  /* ---- Radii — classical restraint ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadows — navy-tinted, soft ---- */
  --shadow-xs: 0 1px 2px rgba(20, 32, 57, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 32, 57, 0.07), 0 2px 8px -2px rgba(20, 32, 57, 0.08);
  --shadow-md: 0 2px 6px rgba(20, 32, 57, 0.06), 0 8px 24px -8px rgba(20, 32, 57, 0.16);
  --shadow-lg: 0 4px 12px rgba(20, 32, 57, 0.08), 0 20px 48px -16px rgba(20, 32, 57, 0.28);

  /* ---- Hairline rules (engraved-paper feel) ---- */
  --rule-soft: 1px solid var(--border-soft);
  --rule-strong: 1px solid var(--border-strong);
  --rule-brass: 2px solid var(--brass-400);

  /* ---- Motion — composed, never bouncy ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;   /* hovers: darken one step */
  --duration-base: 220ms;   /* entrances: fade + 8–12px rise */

  /* ---- Marketing-site layout ---- */
  --content-max: 1120px;
  --space-section: clamp(4rem, 9vw, 6rem);
}

/* Alternate-theme hook — a future rebrand overrides tokens here and sets
   theme: "name" in js/config.js. No shipped alternates: the design system
   above is the brand. Example:
   [data-theme="rebrand-2027"] { --navy-900: …; --font-display: …; }        */