/*
 * Option 03 — "GCC" direction
 * Design tokens for Athanasius College.
 *
 * Color, type and motion values are lifted from the live gcc.edu stylesheets
 * (skin.css / portal.css). The typefaces and the error colour are added;
 * see README.md.
 */

:root {
  /* ---- Brand --------------------------------------------------------- */
  --crimson:       #CC0000;  /* the primary action and the link colour  */
  --crimson-hover: #990000;
  --amber:         #E8982E;  /* the secondary action — a BRAND colour,  */
  --amber-hover:   #CC7E17;  /* never a warning. 2.34:1 — never as type */
  --cream:         #FAEAD5;  /* the DEFAULT page ground, not an accent  */
  --aqua:          #1F7F80;  /* ADDED at the college's request: a Gulf     */
  --aqua-deep:     #155E60;  /* greenish-blue. Bands and the hero overlay; */
                             /* white type on it: 5.0:1. Never a button.  */

  /* ---- State --------------------------------------------------------- */
  /* Added, not inherited. gcc.edu sets `label.error { color: #CC0000 }` —
     the brand crimson — so a failed field is indistinguishable from a call
     to action. Bordeaux is 19° cooler in hue and much less saturated:
     9.35:1 on white, 7.93:1 on cream, 8.43:1 on chalk.
     On a red-branded site colour cannot be the whole signal, so an error
     always carries THREE: this rule, the tint behind it, and an icon
     beside the message. */
  --error:      #8A1538;
  --error-tint: #F6E7EA;  /* a ground no brand element ever uses */

  /* ---- Neutrals — warm-leaning, so they sit on cream ------------------ */
  --pitch:  #1E1E1E;  /* full-bleed image bands                       */
  --slate:  #464646;  /* headings and lead copy                       */
  --quill:  #6D6C71;  /* body copy — note the violet cast, keep it    */
  --mute:   #9A9AA0;  /* captions and specimen annotations            */
  --line:   #C9C9CC;  /* input borders, disabled fills                */
  --rule:   #E4E4E4;  /* dividers and card edges                      */
  --chalk:  #F3F3F3;  /* the cool alternate ground                    */
  --paper:  #FFFFFF;

  /* ---- Typeface ------------------------------------------------------ */
  /* Spectral SC is a TRUE small-caps cut. Write headings in sentence case
     and let the font capitalise — typing in caps yields all-caps and kills
     the effect. */
  --font-display: "Spectral SC", Georgia, "Times New Roman", serif;
  --font-sub:     Spectral, Georgia, "Times New Roman", serif;
  --font-body:    Mulish, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Type ramp — headings are set solid ---------------------------- */
  --type-display:    500 44px/44px var(--font-display);
  --type-heading:    500 40px/40px var(--font-display);  /* + ls 1px */
  --type-subdisplay: 400 30px/30px var(--font-sub);
  --type-card:       400 24px/28px var(--font-sub);

  --type-lead:    20px/30px var(--font-body);  /* slate */
  --type-body:    16px/24px var(--font-body);  /* quill */
  --type-caption: 13px/20px var(--font-body);

  --type-eyebrow: 700 13.6px/20px var(--font-body);  /* uppercase, crimson */
  --type-button:  700 16px/24px var(--font-body);    /* uppercase          */
  --tracking-eyebrow: 1px;
  --tracking-heading: 1px;   /* on the 40px heading only */
  --tracking-link:    0.48px;

  /* Below 768 the display steps down from 44 to 32. */
  --type-display-sm: 500 32px/34px var(--font-display);

  /* ---- Space --------------------------------------------------------- */
  --space-4:  4px;   /* icon to label                                     */
  --space-8:  8px;   /* button padding, vertical (6 at the bottom)        */
  --space-16: 16px;  /* eyebrow → heading · page gutter, mobile           */
  --space-20: 20px;  /* heading → lead                                    */
  --space-25: 25px;  /* button padding, horizontal — inherited, keep it   */
  --space-32: 32px;  /* THE ROW UNIT: section, card padding, grid gutter  */
  --space-48: 48px;  /* between stacked blocks inside a section           */
  --section:  64px;  /* section padding on a cream or dark band           */
  --gutter:   88px;  /* page gutter, desktop                              */
  --section-lg: 128px; /* around a hero or a full-bleed break             */

  /* ---- Measures ------------------------------------------------------ */
  --measure-frame: 1280px;  /* the outer frame                     */
  --measure:       1200px;  /* standard content width              */
  --measure-rows:  1168px;  /* card and image rows                 */
  --measure-text:  800px;   /* article body                        */
  --measure-body:  660px;   /* the body measure                    */
  --measure-card:  369px;   /* one column of a three-up card row   */

  /* ---- Shape — square everywhere ------------------------------------- */
  --radius:      0;
  --radius-full: 50%;  /* avatars only */

  /* The keyline button. Reproduce all three parts or it stops being this
     system: fill, a 1px WHITE border, and a 4px outline in the fill's own
     colour outside it. Box 40px; footprint 48px, so leave >= 24px between
     adjacent buttons or the outlines collide. There are no shadows. */
  --keyline-border:  1px;
  --keyline-outline: 4px;
  --control:         40px;  /* box    */
  --control-footprint: 48px;

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

/* Breakpoints: 640 · 768 · 1024 · 1280. */

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