/* ==========================================================================
   OTN theme: tokens (DESIGN.md sections 2 and 3), ported from the mockups'
   assets/css/tokens.css.
   1. :root tokens: the SU palette, then everything that is the same in
      light and dark mode (fonts, type, spacing, layout, sizes, radii,
      z-index, motion), then the page-level theme tokens (logo, halos).
   2. Colour roles (--otn-*), DARK: the "OTN On Air" design and the
      default. The same block gives the parts that stay dark on a light
      page ("dark parts": the LIVE bar, the cookie notice and the inside of
      every player) their dark values.
      LIGHT mode's values are in theme-light.css, which loads right after
      this file.
   3. Reduced-motion resets.
   Components use the role tokens (--otn-*), never the --su-* primitives,
   except in this file and theme-light.css.

   The fonts' @font-face rules are not here: theme.json declares them
   (SU's font server, https://assets.cdn.syr.edu/fonts/), so WordPress
   prints them for visitors and the editor alike.
   ========================================================================== */

/* ---------- 1. Tokens that are the same in light and dark mode ---------- */

:root {
  /* ---------- SU palette (Brand Guidelines Aug 2025, p. 23). No other colours, no computed shades. ---------- */
  /* WCAG relative luminance in the comments                                                              */
  --su-primary-blue:  #000E54; /* L 0.0095 */
  --su-orange:        #F76900; /* L 0.2988 */
  --su-white:         #FFFFFF; /* L 1.0000 */
  --su-medium-orange: #FF431B; /* L 0.2535 */
  --su-light-orange:  #FF8E00; /* L 0.4061 */
  --su-medium-blue:   #203299; /* L 0.0489 */
  --su-black:         #000000; /* L 0       media only; never behind our text */
  --su-light-gray:    #ADB3B8; /* L 0.4459  dark: form-field borders; light: hairlines and edges (decorative); both: the Watch theatre's screen edge; never text */
  --su-medium-gray:   #707780; /* L 0.1820  LIGHT mode only: form-field borders (4.53:1 on white); never text (3.90:1 on navy) */
  --su-dark-orange:   #D74100; /* L 0.1823  LIGHT mode only: links on white (4.52:1, always underlined); never on navy (3.90:1) */
  /* Not used: Dark Gray #404040 (navy carries all text on white); Light Blue
     #2B72D7 marked placeholders in the mockups only */

  /* ---------- Focus sizes ---------- */
  --otn-focus-width: 3px;
  --otn-focus-offset: 3px;
  --otn-focus-offset-media: 4px;                  /* posters, players, photos */

  /* ---------- Fonts (all from https://assets.cdn.syr.edu/fonts/, declared in theme.json) ---------- */
  --otn-font-sans:    "Sherman Sans", Verdana, sans-serif;
  --otn-font-serif:   "Sherman Serif", Georgia, serif;
  --otn-font-display: "Syracuse Block Condensed", "Sherman Sans", Verdana, sans-serif;  /* no Oswald: SU fonts only */
  --otn-fw-book: 400;
  --otn-fw-bold: 700;
  --otn-fw-display: 700;

  /* ---------- Type scale: phone (375px) -> desktop (1440px), fluid between. rem + vw so zoom works ---------- */
  --otn-fs-display-xl: clamp(2.75rem, 1.782rem + 4.131vw, 5.5rem);      /* 44 -> 88  homepage headline line */
  --otn-fs-display-l:  clamp(2.5rem, 1.796rem + 3.005vw, 4.5rem);       /* 40 -> 72  page H1 */
  --otn-fs-display-m:  clamp(1.875rem, 1.567rem + 1.315vw, 2.75rem);    /* 30 -> 44  H2 lower thirds */
  --otn-fs-display-s:  clamp(1.625rem, 1.493rem + 0.563vw, 2rem);       /* 26 -> 32  job titles, the lead tile's name */
  --otn-fs-numeral:    clamp(2.5rem, 2.148rem + 1.502vw, 3.5rem);       /* 40 -> 56  "24.2" */
  --otn-fs-initials:   clamp(2.25rem, 2.074rem + 0.751vw, 2.75rem);     /* 36 -> 44  staff initials */
  --otn-fs-poster:     clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem);   /* 22 -> 26  poster titles */
  --otn-fs-h3:         clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);      /* 20 -> 24  Sherman Sans Bold */
  --otn-fs-h4:         1.125rem;                                         /* 18 */
  --otn-fs-lead:       clamp(1.1875rem, 1.1rem + 0.376vw, 1.4375rem);   /* 19 -> 23  Sherman Serif deks */
  --otn-fs-quote:      clamp(1.1875rem, 1.122rem + 0.282vw, 1.375rem);  /* 19 -> 22  Sherman Serif quotes */
  --otn-fs-body:       clamp(1.0625rem, 1.041rem + 0.094vw, 1.125rem);  /* 17 -> 18 */
  --otn-fs-small:      0.9375rem;  /* 15: one-liners, captions, footer, cookie notice, LIVE bar */
  --otn-fs-label:      0.875rem;   /* 14: kickers, LIVE badge, straps, chips. Smallest size anywhere */
  --otn-fs-nav:        1rem;       /* 16 desktop nav */
  --otn-fs-menu:       1.25rem;    /* 20 phone-menu main links */
  --otn-fs-button:     1rem;       /* 16 */
  --otn-fs-button-compact: 0.9375rem; /* 15 */

  --otn-lh-display: 0.95;
  --otn-lh-heading: 1.05;
  --otn-lh-h3: 1.25;
  --otn-lh-lead: 1.45;
  --otn-lh-quote: 1.5;
  --otn-lh-body: 1.6;
  --otn-lh-small: 1.5;
  --otn-lh-label: 1.2;
  --otn-ls-display: 0.01em;
  --otn-ls-heading: 0.015em;
  --otn-ls-poster: 0.02em;
  --otn-ls-label: 0.08em;
  --otn-measure: 34em;  /* ~612px at 18px: about 70-75 characters of Sherman Sans */

  /* ---------- Spacing (4px base; the same scale is theme.json's spacingSizes) ---------- */
  --otn-space-1: 0.25rem;  /* 4 */
  --otn-space-2: 0.5rem;   /* 8 */
  --otn-space-3: 0.75rem;  /* 12 */
  --otn-space-4: 1rem;     /* 16 */
  --otn-space-5: 1.5rem;   /* 24 */
  --otn-space-6: 2rem;     /* 32 */
  --otn-space-7: 3rem;     /* 48 */
  --otn-space-8: 4rem;     /* 64 */
  --otn-space-9: 6rem;     /* 96 */
  --otn-space-10: 8rem;    /* 128 */
  --otn-gutter:    clamp(1rem, 0.472rem + 2.254vw, 2.5rem);   /* 16 -> 40  page side padding */
  --otn-section-y: clamp(3rem, 1.944rem + 4.507vw, 6rem);     /* 48 -> 96  between sections */
  --otn-grid-gap:  clamp(1rem, 0.824rem + 0.751vw, 1.5rem);   /* 16 -> 24 */

  /* ---------- Layout ---------- */
  --otn-w-reading: 47.5rem;  /* 760: reading column (theme.json contentSize) */
  --otn-w-wide:    80rem;    /* 1280: content container and billboard (theme.json wideSize); also the Watch theatre player */
  --otn-w-max:     90rem;    /* 1440: .otn-container--max */
  --otn-scroll-pad: 5.5rem;  /* 88: sticky header + room, for scroll-padding-top at 900px+ wide and 500px+ tall */

  /* ---------- Component sizes ---------- */
  --otn-tap-min: 2.75rem;            /* 44: minimum target */
  --otn-livebar-h: 2.5rem;           /* 40 min-height (36 below 600px); it may wrap */
  --otn-header-h: 4.5rem;            /* 72 at 900px+; 64 below */
  --otn-header-h-phone: 4rem;
  --otn-logo-h: 2.5rem;              /* OTN mark: 40 tall = 79 wide (PNG 1200 x 607, ratio 1.976) */
  --otn-logo-h-phone: 1.75rem;       /* 28 tall = 55 wide */
  --otn-nh-h: 2.25rem;               /* Newhouse lockup: 36 tall = 130 wide (ratio 3.62) */
  --otn-nh-h-phone: 1.5rem;          /* 24 tall = 87 wide */
  --otn-btn-h: 3rem;                 /* 48 */
  --otn-btn-h-compact: 2.75rem;      /* 44 */
  --otn-badge-h: 1.5rem;             /* 24 LIVE badge */
  --otn-play: 5.5rem;                /* 88 play button; 72 below 600px */
  --otn-play-phone: 4.5rem;
  --otn-poster-w: min(72vw, 20rem);  /* phones: next card peeks in (from 600px rows size cards from the row's own width, the content column) */
  --otn-avatar: clamp(7.5rem, 6.62rem + 3.756vw, 10rem); /* 120 -> 160 staff circles */
  --otn-bar-lt: 6px;                 /* lower-third bar thickness; strap left bar */
  --otn-bar-lt-w: 4rem;              /* 64 lower-third bar length (H2) */
  --otn-bar-pagehead-w: 6rem;        /* 96 page-title bar length */
  --otn-bar-current: 4px;            /* current page in the nav */
  --otn-bar-panel: 8px;              /* billboard panel left bar */
  --otn-bug-w: 3rem;                 /* 48 wide channel bug (OTN logo) */
  --otn-cookie-h: 0px;               /* set by otn-privacy's script to the cookie notice's height while it shows fixed (0 when static) */

  /* ---------- Radii, borders, shadows ---------- */
  /* (--otn-border-hair, --otn-border-field, --otn-shadow-menu and
     --otn-shadow-panel are in the colour block below: light mode changes them) */
  --otn-radius-s: 2px;               /* buttons, chips, fields, straps */
  --otn-radius-m: 4px;               /* posters, media frames, cards, tiles */
  --otn-radius-round: 50%;           /* play button, avatars, initials */
  --otn-shadow-play-ring: 0 0 0 2px var(--su-white);   /* outer white ring so the play button shows on any picture */
  --otn-shadow-poster-hover: inset 0 0 0 3px var(--su-orange);

  /* ---------- Z-index ---------- */
  --otn-z-base: 0;
  --otn-z-raised: 1;     /* poster strap over its image, hovered poster */
  --otn-z-header: 100;   /* sticky header at 900px+ wide and 500px+ tall */
  --otn-z-menu: 200;     /* phone menu panel */
  --otn-z-cookie: 300;   /* cookie notice */
  --otn-z-skip: 400;     /* skip link when focused */

  /* ---------- Motion ---------- */
  --otn-dur-fast: 120ms;
  --otn-dur-base: 200ms;
  --otn-dur-slow: 320ms;
  --otn-ease: cubic-bezier(0.2, 0, 0, 1);
  --otn-live-pulse-dur: 1.2s;
  --otn-live-pulse-count: 3;   /* 3.6s in all, then still: inside WCAG 2.2.2's 5 seconds */
  --otn-poster-zoom: 1.03;
  --otn-play-hover-scale: 1.06;

  /* ---------- Page-level theme tokens (dark values) ----------
     Set on <html> only, NOT in the colour block below: they describe the
     page around the dark parts, so the dark parts inherit the page's value
     (theme-light.css changes them for light pages). */
  --otn-show-on-dark:  inline-block; /* display of the dark-mode logo pictures (white letters); light mode: none */
  --otn-show-on-light: none;         /* display of the light-mode logo pictures (navy letters); light mode: inline-block */
  --otn-brand-divider: rgb(255 255 255 / 0.4); /* thin line between the Newhouse lockup and OTN's mark */
  --otn-skip-halo:  transparent;    /* halo behind the skip link's focus ring (light: white, as it crosses the #203299 LIVE bar) */

  /* ---------- Breakpoints (reference only: custom properties can't be used in @media) ----------
     xs  max-width: 360px   poster rows stack at 360px and narrower (400% zoom of 1280-1440px, and 360px Android phones)
         min-width: 480px   button groups side by side; Facilities galleries 2-up and Alumni credits in 2 columns (bounded ranges)
     sm  min-width: 600px   2-column grids, poster rows show 2.4 cards, Shows grid and where-to-watch tiles leave their phone list layouts
     md  min-width: 900px   full menu replaces the Menu button; header sticky (when also 500px+ tall); billboard and 2-column page layouts; rows show 3.4 cards
     lg  min-width: 1200px  4-column poster grid, 4 where-to-watch tiles a row, poster rows show 4.4 cards
     xl  min-width: 1440px  max width reached; content stays centred
     Write media queries phone-first (min-width), in px. */
}

/* ---------- 2. Colour roles: DARK ("OTN On Air"), the default ----------
   Declared on <html>, and again on the parts that stay dark when the page
   is light ("dark parts"): the LIVE bar, the cookie notice and the inside
   of every video player. Custom properties inherit, so everything inside a
   dark part gets these values with no rules of its own; theme-light.css
   sets its light values on <html> only, so they never reach inside a dark
   part. :where() keeps the dark parts' selectors at zero specificity (any
   component rule still wins). OTN's plugins print these classes. */

:root,
:where(.otn-livebar, .otn-cookie, .otn-player__frame) {
  color-scheme: dark;  /* native controls and scrollbars drawn dark */

  /* ---------- Surfaces ---------- */
  --otn-bg:            var(--su-primary-blue);   /* page, header, footer, cards, tiles, menu */
  --otn-raised:        var(--su-medium-blue);    /* LIVE bar, bands, cookie notice, cards, chips: WHITE text only */
  --otn-screen:        var(--su-black);          /* video wells, image mats, theatre band: no text of ours */
  --otn-accent:        var(--su-orange);         /* primary buttons, bars, play button, initials: NAVY text only */
  --otn-accent-hover:  var(--su-light-orange);
  --otn-accent-active: var(--su-medium-orange);
  --otn-live:          var(--su-medium-orange);  /* LIVE badge fill: NAVY text */

  /* ---------- Text ---------- */
  --otn-text:            var(--su-white);         /* 17.63:1 on bg, 10.62:1 on raised */
  --otn-text-on-accent:  var(--su-primary-blue);  /* 5.86 on orange, 7.66 on light orange, 5.10 on medium orange */
  --otn-link:            var(--su-light-orange);  /* 7.66:1, on bg ONLY, always underlined */
  --otn-link-hover:      var(--su-white);
  --otn-link-on-raised:  var(--su-white);         /* orange text on #203299 is not an SU pairing */
  --otn-kicker:          var(--su-light-orange);  /* 14px labels, on bg only (white on raised) */
  --otn-numeral:         var(--su-orange);        /* "24.2": 40px and up, on bg only */
  --otn-error:           var(--su-medium-orange); /* error borders and bars; 5.10:1 vs bg */
  --otn-error-text:      var(--su-medium-orange); /* error messages: 5.10:1, bold, on bg only (light: navy) */

  /* ---------- Lines and focus ---------- */
  --otn-bar:             var(--su-orange);        /* lower-third bars, current-page bar, job-card top edge */
  --otn-rule:            var(--su-medium-blue);   /* hairlines: decorative only (1.66:1 vs bg) */
  --otn-rule-on-raised:  var(--su-primary-blue);  /* a lower third's rule on a #203299 band */
  --otn-field-border:    var(--su-light-gray);    /* 8.33:1 vs bg (non-text): form-field borders */
  --otn-screen-edge:     var(--su-light-gray);    /* Watch theatre player's 1px edge: 9.92:1 vs screen (decorative) */
  --otn-focus:           var(--su-white);         /* 17.63 on bg, 21.00 on screen, 10.62 on raised */
  --otn-focus-on-accent: var(--su-primary-blue);  /* only if a focusable item ever sits ON an orange fill */

  /* ---------- Fills, edges and alerts ----------
     Light mode needs these to tell white surfaces apart; in dark mode each
     one reproduces the design (no edge, no extra width). */
  --otn-fill:            var(--su-medium-blue);   /* solid fill under WHITE text: hover fills, table header, name super bar */
  --otn-on-fill:         var(--su-white);         /* 10.62:1 on #203299 (light: 17.63:1 on navy) */
  --otn-fill-on-raised:  var(--su-primary-blue);  /* ghost-button hover fill on #203299 cards, callouts and bands */
  --otn-edge:            transparent;             /* edge of cards, callouts, tiles, poster straps, the billboard panel, the form status (light: Light Gray) */
  --otn-edge-w:          0px;                     /* its width (light: 1px; tiles keep their 2px border) */
  --otn-alert-w:         0px;                     /* width of the error summary's border and the error messages' bar (light: 4px) */
  --otn-chip-edge:       transparent;             /* jump chips' 2px inside edge (light: navy) */
  --otn-scroll-thumb:    var(--su-orange);        /* poster rows' scrollbar */
  --otn-scroll-track:    var(--su-medium-blue);

  /* ---------- Borders and shadows made from the roles above ----------
     Re-declared wherever the roles change (dark parts, light mode), because a
     custom property's var() is worked out where it is declared */
  --otn-border-hair: 1px solid var(--otn-rule);
  --otn-border-field: 2px solid var(--otn-field-border);
  --otn-shadow-menu: 0 12px 32px rgb(0 0 0 / 0.55);
  --otn-shadow-panel: 0 16px 48px rgb(0 0 0 / 0.55);
}

/* ---------- 3. Reduced motion: one place to switch motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --otn-dur-fast: 0.01ms;
    --otn-dur-base: 0.01ms;
    --otn-dur-slow: 0.01ms;
    --otn-live-pulse-count: 0;
    --otn-poster-zoom: 1;
    --otn-play-hover-scale: 1;
  }
}