/*
 * Option 04 — "WTS" direction
 * Design tokens for Athanasius College.
 *
 * The colour values come straight from wts.edu's own CSS custom properties
 * (a Webflow build), so the names below mirror theirs where it helps.
 * The typefaces and the error colour are added; see README.md.
 */

:root {
  /* ---- Grounds — the three bands -------------------------------------- */
  /* A page is a sequence of full-bleed colour bands. These do the work
     that margins and rules do in a lighter system. */
  --maroon: #4A0009;  /* primary ground: hero, footer, institutional bands */
  --wine:   #8A2233;  /* second band · THE LINK COLOUR on any light ground */
  --gold:   #BF8B3A;  /* the button FILL, and the third band              */
  /* Gold does not set type on a light ground: 3.01:1 on white, 2.40:1 on
     gainsboro — both below AA at any size. Anything placed ON gold is
     --maroon (5.38:1), a button label included, and the gold button's hover
     inverts to a maroon fill with a gold label rather than darkening.
     A link on a light ground is --wine (8.91:1); gold type is for dark
     bands only, where it reaches 5.38:1. */
  --sienna: #B5533C;  /* occasional fourth. Never carries a message —      */
                      /* it is close enough to --error to be confused      */

  /* ---- State ---------------------------------------------------------- */
  /* Added, not inherited. wts.edu styles error and success messages
     identically — `.success-message, .error-message { color: var(--black) }`,
     both plain #222 — so it has no error colour to lift. The only red in
     its stylesheet is untouched Webflow boilerplate.
     With THREE brand reds already, hue cannot separate an error colour.
     Chroma does: every brand red is muted (oklch C 0.10–0.14), Alarm is
     vivid at C 0.19. 6.57:1 on white, 5.23:1 on gainsboro.
     HARD LIMIT: Alarm on --maroon is 2.47:1 and fails. An error may never
     appear inside a maroon band — move the form to gainsboro or white. */
  --error:      #B71C1C;
  --error-tint: #F8E7E5;

  /* ---- Neutrals — cool, against the warm grounds ---------------------- */
  --ink:       #222222;  /* headings on light                    */
  --body:      #333333;  /* all running text                     */
  --slate:     #444C54;  /* captions, secondary bands            */
  --mist:      #8D9298;  /* meta, disabled, specimen labels      */
  --hairline:  #C9C6C1;  /* input borders, rules on gainsboro    */
  --gainsboro: #E7E5E2;  /* the light ground and every divider   */
  --disabled:  #D8D5D1;
  --paper:     #FFFFFF;

  /* On a coloured band, body copy is white at 82% and dividers white at 28%. */
  --body-on-band:    rgba(255, 255, 255, 0.82);
  --divider-on-band: rgba(255, 255, 255, 0.28);

  /* ---- Typeface ------------------------------------------------------- */
  /* Crimson Pro is weight 300 and never heavier — there is no bold heading.
     It also never goes below 28px: at 300 on a maroon band, smaller sizes
     start to break up. Those two constraints are the same constraint. */
  --font-display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-label:   "Alegreya Sans", "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Type ramp ------------------------------------------------------ */
  --type-display: 300 56px/61.6px var(--font-display);   /* + ls 1px */
  --type-h1:      300 40px/48px   var(--font-display);
  --type-h2:      300 34px/40px   var(--font-display);
  --type-h3:      300 28px/32px   var(--font-display);   /* the floor */
  --type-quiet:   300 30px/37px   var(--font-display);   /* + ls 2px  */

  --type-label:    13px/18px   var(--font-label);  /* uppercase, ls 2px   */
  --type-label-sm: 12.8px/17.9px var(--font-label); /* uppercase, ls 1.2px */
  --tracking-label:    2px;
  --tracking-label-sm: 1.2px;
  --tracking-display:  1px;

  --type-body:      16px/26px var(--font-body);  /* reading copy         */
  --type-interface: 14px/20px var(--font-body);  /* nav, meta, at-a-glance */

  /* Below 767 the display steps from 56 to 34. */
  --type-display-sm: 300 38px/44px var(--font-display);
  /* The wordmark is the one display element below the 28px floor:
     24px on desktop, 21px on mobile. Nothing else goes under 28. */
  --type-wordmark:    300 24px/28px var(--font-display);
  --type-wordmark-sm: 300 21px/26px var(--font-display);

  /* ---- Space — multiples of 8, one optical exception ------------------ */
  --space-8:  8px;   /* icon to label                                  */
  --space-16: 16px;  /* label → heading · page gutter, mobile          */
  --space-20: 20px;  /* heading → body — OPTICAL, not on the 8 grid:   */
                     /* a 300-weight heading sits high in its line box */
  --space-24: 24px;  /* card padding, horizontal                       */
  --space-32: 32px;  /* stacked blocks · grid gutter · card, horizontal */
  --space-40: 40px;  /* notice box padding, vertical                   */
  --space-48: 48px;  /* THE CARD UNIT: coloured card padding, vertical */
  --band-sm:  64px;  /* band padding, mobile                           */
  --gutter:   88px;  /* page gutter, desktop                           */
  --band:     96px;  /* band padding, desktop                          */

  /* ---- Measures ------------------------------------------------------- */
  --measure-bleed: 1400px;  /* full-bleed band, capped     */
  --measure:       1200px;  /* standard content width      */
  --measure-rows:  1120px;  /* card and image rows         */
  --measure-text:  700px;   /* article body                */
  --measure-body:  660px;   /* the body measure            */
  --measure-card:  300px;   /* one coloured card           */

  /* ---- Shape ---------------------------------------------------------- */
  --radius:      0;
  --radius-full: 100%;  /* avatars only */

  /* The one shadow, thrown down and to the LEFT. Raised card only, never
     on a coloured band. */
  --shadow: -11px 11px 15px rgba(0, 0, 0, 0.2);

  --control:    48px;
  --control-sm: 40px;  /* desktop chrome only */

  /* ---- Motion — one duration ------------------------------------------ */
  --duration: 200ms;
  --ease: ease;
}

/* Breakpoints: 640 · 767 · 1024 · 1400. */

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}