/*
 * Option 02 — "RFB" direction
 * Design tokens for Athanasius College.
 *
 * Color, type and motion values are lifted from the live
 * reformationbiblecollege.org stylesheet. The typefaces are open
 * substitutes; see README.md.
 *
 * Note: this scale is em-derived, not snapped to a 4px grid. That is why
 * tracking lands on 2.9 / 3.3px and the half-column on 617.5px. Keep it.
 */

:root {
  /* ---- Brand --------------------------------------------------------- */
  --flame:  #EF5928;  /* every action: button outlines, link hover, active nav */
  --brass:  #B5862D;  /* ceremonial second: giving, honors, convocation        */
  --sand:   #E8D8C8;  /* warm ground for a set-apart section; ink type only    */

  /* ---- State --------------------------------------------------------- */
  /* Errors and destructive confirmations, and nothing else. Two steps
     darker than the flame rather than merely redder — the two sit only
     ~10° apart in hue, so lightness is what separates them, including for
     a reader who cannot tell red from orange. 7.6:1 on paper, 7.0:1 on
     chalk, 5.5:1 on sand. Never carry an error on colour alone. */
  --error:  #A31D1D;  /* "rubric" — field underline, message, destructive */

  /* ---- Neutrals — a ramp, deliberately uneven ------------------------ */
  --pitch:  #080808;  /* full-bleed dark bands            */
  --ink:    #282828;  /* headings, rules, labels          */
  --slate:  #4E4E4E;  /* ALL body copy — never ink        */
  --mist:   #747474;  /* captions, meta, disabled         */
  --line:   #DBDBDB;  /* every hairline divider           */
  --chalk:  #F5F5F5;  /* alternate section ground         */
  --paper:  #FFFFFF;

  /* On pitch, body copy is white at 80% and rules turn white.
     The flame does not change between grounds. */
  --body-on-dark:  rgba(255, 255, 255, 0.8);
  --meta-on-dark:  rgba(255, 255, 255, 0.6);

  /* ---- Typeface ------------------------------------------------------ */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-label:   Jost, Futura, "Century Gothic", Helvetica, Arial, sans-serif;

  /* ---- Type ramp — display is set solid, body opens right up --------- */
  --type-display:        300 120px/120px var(--font-display);
  --type-display-italic: italic 300 110px/110px var(--font-display);
  --type-heading-lg:     300 60px/60px var(--font-display);
  --type-heading-sm:     400 32px/38px var(--font-display);

  --type-body:    20px/38px var(--font-body);  /* leading 1.9 — the signature */
  --type-body-sm: 19px/34px var(--font-body);  /* columns under half-width    */
  --type-caption: 16px/26px var(--font-body);

  --type-label-lg: 16.5px/28px var(--font-label);  /* buttons              */
  --type-label-sm: 14.5px/28px var(--font-label);  /* nav, eyebrows        */
  --type-label-xs: 12px/20px var(--font-label);    /* meta, sheet captions */
  --tracking-label: 0.2em;   /* every Jost label, without exception */
  --tracking-mark:  2px;     /* the serif uppercase wordmark        */

  /* Mobile: the display scale halves — 120 becomes 56. */
  --type-display-sm: 300 56px/58px var(--font-display);

  /* ---- Space --------------------------------------------------------- */
  --space-12:  12px;  /* button padding, vertical                        */
  --space-16:  16px;  /* text-button padding, vertical                   */
  --space-20:  20px;  /* inside the section opener: rule→label→heading   */
  --space-32:  32px;  /* button padding, horizontal · heading→paragraph  */
  --space-40:  40px;  /* card padding                                    */
  --space-56:  56px;  /* stacked blocks · grid gutter                    */

  --section-sm: 80px;   /* section padding, mobile   */
  --gutter:     100px;  /* page gutter, desktop      */
  --gutter-sm:  24px;   /* page gutter, mobile       */
  --section:    160px;  /* section padding, desktop  */
  --section-lg: 220px;  /* around a hero or a break  */

  /* ---- Measures ------------------------------------------------------ */
  --measure-bleed: 1560px; /* full-bleed media and dark bands    */
  --measure-frame: 1300px; /* the outer content frame            */
  --measure-rows:  1105px; /* card and image rows                */
  --measure-head:  950px;  /* a display heading at its widest    */
  --measure-body:  617.5px;/* half column, and the body measure  */
  --measure-card:  445px;  /* card copy, sidebar                 */

  /* ---- Shape — square, without exception ----------------------------- */
  --radius:      0;
  --radius-full: 50%;   /* avatars only */

  /* Strokes carry the structure. There are no shadows in this system. */
  --stroke-section: 50px;  /* × 2px ink   — the section marker         */
  --stroke-sub:     20px;  /* × 2px slate — sub-marker, inside columns */
  --stroke-hair:    1px;   /* --line      — dividers and card edges    */
  --stroke-error:   2px;   /* --error     — underline on a field in error */

  /* ---- Controls ------------------------------------------------------ */
  --control:    57px;  /* 15px padding + 25px line + 15px + 2px border */
  --control-sm: 49px;  /* 11px padding + 25px line + 11px + 2px border */

  /* ---- Motion -------------------------------------------------------- */
  --duration-underline: 750ms;  /* the slow rule on text buttons */
  --duration-fill:      200ms;  /* outline buttons filling       */
  --ease: ease;
}

/* Breakpoints: 640 · 768 · 1024 · 1440.
   Below 768: one column, gutter drops to --gutter-sm, display scale halves. */

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