/* ==========================================================================
   Estudi Musical 143 — design tokens
   --------------------------------------------------------------------------
   Every colour, size and space in the site comes from this file.
   Variable names mirror WordPress theme.json presets so the port is a rename,
   not a rewrite:  --em-red  ->  --wp--preset--color--secondary
   Nothing outside this file should contain a raw hex value.
   ========================================================================== */

:root {

  /* --- Colour ------------------------------------------------------------
     The palette is the current site's own, unchanged: the red is the school's
     existing brand red (theme.json "secondary"), the sand is "primary", the
     paper is "gray-light" and the ink is "text-color".
     Only two values are new, and both are accessibility repairs:
       --em-sand-ink  a darker sand that passes WCAG AA at small sizes
                      (6.5:1 on white; the original #A58A79 is 3.2:1 and fails)
       --em-red-dark  a hover/active state, which the palette never had
     ---------------------------------------------------------------------- */

  --em-red:        #AF0112;   /* brand red — buttons, links, accents        */
  --em-red-dark:   #8A010E;   /* hover / active                             */
  --em-red-70:     #C64B57;   /* tones of red for the accent cells          */
  --em-red-45:     #D68E96;
  --em-red-25:     #E8C2C6;
  --em-red-12:     #F5E4E6;

  --em-sand:       #A58A79;   /* warm neutral — large text and rules only   */
  --em-sand-ink:   #6F5A4C;   /* warm neutral — safe at any size            */
  --em-sand-12:    #F2EDE9;
  --em-sand-head:  #9C8168;   /* section headings — 3.4:1, large text only  */

  --em-paper:      #F7F3EF;   /* warm off-white section background          */
  --em-ink:        #383838;   /* body text                                  */
  --em-ink-60:     #6B6B6B;   /* secondary text                             */
  --em-white:      #FFFFFF;

  --em-rule:       rgba(56, 56, 56, .13);   /* hairlines                    */
  --em-rule-faint: rgba(56, 56, 56, .07);   /* the manuscript grid          */

  /* --- Type --------------------------------------------------------------
     A serif display face against a neutral sans, the pairing that gives
     primer.com its calm. Instrument Serif is a single-weight display serif —
     it is only ever used large, never for body copy.
     ---------------------------------------------------------------------- */

  --em-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --em-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Helvetica, Arial, sans-serif;

  /* Fluid scale — no media queries needed for type */
  --em-size-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --em-size-h2:      clamp(1.95rem, 1.35rem + 2.4vw, 3rem);
  --em-size-h3:      clamp(1.2rem,  1.06rem + .55vw, 1.5rem);
  --em-size-h4:      clamp(1.1rem,  1.04rem + .28vw, 1.25rem);  /* sub-heads in prose */
  --em-size-lead:    clamp(1.1rem,  1.02rem + .35vw, 1.3rem);
  --em-size-body:    1.0625rem;
  --em-size-small:   .875rem;
  --em-size-micro:   .75rem;

  --em-lh-tight:  1.08;
  --em-lh-snug:   1.3;
  --em-lh-body:   1.68;

  --em-track-kicker: .13em;   /* letter-spacing for the small caps kickers  */

  /* --- Space -------------------------------------------------------------
     One 8px-derived scale. --em-cell is the manuscript grid module and the
     whole layout is tuned to it, so changing it re-tunes the page.
     ---------------------------------------------------------------------- */

  --em-cell:   44px;                                  /* grid module        */
  --em-s-1:    .5rem;
  --em-s-2:    1rem;
  --em-s-3:    1.5rem;
  --em-s-4:    2rem;
  --em-s-5:    3rem;
  --em-s-6:    4.5rem;
  --em-s-7:    clamp(4.5rem, 3rem + 6vw, 8rem);       /* between sections   */

  --em-measure:   62ch;    /* readable line length                          */
  --em-container: 1320px;  /* outer width                                   */
  --em-gutter:    clamp(1.25rem, .6rem + 2.6vw, 3rem);

  --em-radius:      4px;
  --em-radius-pill: 999px;

  --em-transition: 160ms ease;
}

/* Respect people who ask for less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}