/* =============================================================
   APPLEBY COLLEGE DESIGN SYSTEM
   Colors + Type foundations
   ============================================================= */

/* ---- FONTS (local) ----
   Adobe Garamond Pro (AGaramond) is provided — this is the licensed
   primary Appleby serif ("Garamond Premier Pro" in the manual is the
   marketing name of the same family). Adobe Garamond Expanded is
   used for the crest-style "Paragon Expanded" role.

   Also provided: Filosofia (secondary serif), News Gothic Bold
   Condensed BT (secondary sans), Bobby Jones Soft (display script),
   Summer Loving (display script alt).
*/

/* --- Adobe Garamond Pro (primary serif) --- */
@font-face {
  font-family: 'AGaramond';
  src: url('fonts/AGaramond-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('fonts/AGaramond-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('fonts/AGaramond-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('fonts/AGaramond-SemiboldItalic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('fonts/AGaramond-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('fonts/AGaramond-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Small caps variants — use font-family: 'AGaramond SC' */
@font-face {
  font-family: 'AGaramond SC';
  src: url('fonts/AGaramond-RegularSC.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond SC';
  src: url('fonts/AGaramond-SemiboldSC.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Titling face — all-caps display */
@font-face {
  font-family: 'AGaramond Titling';
  src: url('fonts/AGaramond-Titling.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Adobe Garamond Expanded — the "Paragon Expanded" crest role */
@font-face {
  font-family: 'AGaramond Expanded';
  src: url('fonts/AGaramondExp-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond Expanded';
  src: url('fonts/AGaramondExp-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'AGaramond Expanded';
  src: url('fonts/AGaramondExp-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond Expanded';
  src: url('fonts/AGaramondExp-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Filosofia';
  src: url('fonts/Filosofia-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'News Gothic BT';
  src: url('fonts/NewsGothicBoldCondensedBT.ttf') format('truetype');
  font-weight: 700;
  font-stretch: condensed;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bobby Jones Soft';
  src: url('fonts/BobbyJonesSoft.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Summer Loving';
  src: url('fonts/SummerLoving.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Primary serif is now fully local — no Google Fonts import required. */

:root {
  /* =========================================================
     COLOR TOKENS
     ========================================================= */

  /* ---- BRAND CORE ---- */
  /* Appleby Blue — the crest & primary brand color. Sampled from
     the primary signature artwork. */
  --ac-blue:              #093C71;
  --ac-blue-deep:         #062B54;   /* hover / pressed / borders on blue */
  --ac-blue-ink:          #021A34;   /* deepest for text on light */

  /* ---- ACCENT ---- */
  /* Appleby Light Blue (PMS 291) — the single approved accent. */
  --ac-light-blue:        #A0CFEB;
  --ac-light-blue-soft:   #D6EAF5;   /* tint for surfaces */
  --ac-light-blue-wash:   #EEF6FB;   /* palest wash / section bg */

  /* ---- CAMPS & ACADEMIES (secondary palette) ---- */
  --ac-camps-orange:      #FF6600;   /* PMS Orange 021 C, per guidelines */
  --ac-camps-orange-swatch: #F26722; /* printed RGB equivalent */
  --ac-camps-navy:        #003F72;   /* PMS 541 C */

  /* ---- HOUSE COLORS ---- */
  --ac-house-baillie:     #009C54;   /* Tigers — green */
  --ac-house-colley:      #ED1823;   /* Bulldogs — red */
  --ac-house-powells:     #FFDF2C;   /* Lions — yellow */
  --ac-house-walker:      #0084CA;   /* Bears — blue */
  --ac-house-nightingale: #8C8F90;   /* grey */

  /* ---- NEUTRALS ---- */
  /* Slightly-warm neutral scale, biased cool so it sits with navy. */
  --ac-white:             #FFFFFF;
  --ac-paper:             #FAFAF7;   /* off-white, prospectus paper */
  --ac-cream:             #F2EFE7;   /* uniform/stationery cream */
  --ac-n-50:              #F5F6F8;
  --ac-n-100:             #EAECF0;
  --ac-n-200:             #D6DAE1;
  --ac-n-300:             #B6BDC7;
  --ac-n-400:             #8B94A2;
  --ac-n-500:             #606A79;
  --ac-n-600:             #424B58;
  --ac-n-700:             #2B323C;
  --ac-n-800:             #171B22;
  --ac-black:             #0B0D11;

  /* ---- SEMANTIC ROLES (light mode default) ---- */
  --bg:                   var(--ac-paper);
  --bg-muted:             var(--ac-n-50);
  --bg-inverse:           var(--ac-blue);
  --bg-inverse-deep:      var(--ac-blue-ink);

  --surface:              var(--ac-white);
  --surface-alt:          var(--ac-light-blue-wash);
  --surface-stationery:   var(--ac-cream);

  --fg:                   var(--ac-blue-ink);     /* body text */
  --fg-muted:             var(--ac-n-500);
  --fg-subtle:            var(--ac-n-400);
  --fg-inverse:           var(--ac-white);
  --fg-on-blue:           var(--ac-white);
  --fg-link:              var(--ac-blue);
  --fg-link-hover:        var(--ac-blue-deep);

  --accent:               var(--ac-blue);
  --accent-soft:          var(--ac-light-blue);
  --accent-wash:          var(--ac-light-blue-wash);

  --border:               var(--ac-n-200);
  --border-strong:        var(--ac-n-300);
  --border-on-blue:       rgba(255,255,255,0.18);

  --success:              #2E7D4F;
  --danger:               #B3261E;
  --warning:              #C77700;

  /* =========================================================
     TYPE TOKENS
     ========================================================= */

  /* Primary serif — Adobe Garamond Pro (the licensed Appleby face).
     Used for body copy, headlines in print/prospectus, the "flagship"
     voice of Appleby. */
  --ff-serif:     'AGaramond', 'Adobe Garamond Pro', 'Garamond Premier Pro', 'EB Garamond', Garamond, Georgia, serif;

  /* Small caps — use directly for the "Appleby College" wordmark if
     preferred over font-variant: small-caps synthesis. */
  --ff-serif-sc:  'AGaramond SC', 'AGaramond', serif;

  /* Titling — all-caps, tight spacing; for labels, section opens,
     and crest-like applications. */
  --ff-titling:   'AGaramond Titling', 'AGaramond', serif;

  /* Expanded / crest role — "Paragon Expanded" alternative per the
     brand manual. */
  --ff-serif-exp: 'AGaramond Expanded', 'AGaramond', serif;

  /* Secondary serif — Filosofia. Small caps used for "APPLEBY COLLEGE"
     wordmark. Used for body, some headlines, business cards. */
  --ff-serif-alt: 'Filosofia', 'AGaramond', 'Georgia', serif;

  /* Secondary sans — News Gothic BT Bold Condensed. Headlines,
     captions, athletic marks. Tight, all-caps feel. */
  --ff-sans-cond: 'News Gothic BT', 'News Gothic', 'Oswald', 'Bebas Neue', 'Helvetica Neue', sans-serif;

  /* Web / correspondence fallback sans (per guidelines Georgia/Verdana/Calibri
     are acceptable for correspondence + web). We default to a clean system stack. */
  --ff-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Calibri', 'Verdana', Arial, sans-serif;

  /* Web/correspondence serif (per guidelines: Georgia) */
  --ff-serif-web: Georgia, 'Times New Roman', serif;

  /* Display script — Bobby Jones Soft. Used sparingly for warm,
     personal moments (headmaster notes, signatures, event invites). */
  --ff-script:    'Bobby Jones Soft', 'Summer Loving', cursive;

  /* Monospace (utilitarian; not brand-defined, included for code) */
  --ff-mono:      ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ---- TYPE SCALE (modular, ~1.25 / 1.333 blend) ---- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;
  --fs-6xl:  112px;

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-prose:   1.6;
  --lh-loose:   1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;     /* for small caps / eyebrow labels */
  --tracking-widest:   0.22em;     /* for athletics / crest-style caps */

  /* =========================================================
     SPACING / RADIUS / SHADOW
     ========================================================= */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Appleby leans traditional/editorial — radii are small.
     Only pill/circle elements use generous radii. */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-xl:    16px;
  --radius-pill:  999px;

  --shadow-sm:    0 1px 2px rgba(9, 60, 113, 0.06), 0 1px 1px rgba(9, 60, 113, 0.04);
  --shadow-md:    0 2px 4px rgba(9, 60, 113, 0.06), 0 6px 16px rgba(9, 60, 113, 0.08);
  --shadow-lg:    0 4px 8px rgba(9, 60, 113, 0.08), 0 20px 40px rgba(9, 60, 113, 0.12);
  --shadow-inset: inset 0 0 0 1px rgba(9, 60, 113, 0.08);
  --shadow-focus: 0 0 0 3px rgba(160, 207, 235, 0.6);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-med:     220ms;
  --dur-slow:    360ms;
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */

.ac-eyebrow {
  font-family: var(--ff-sans-cond);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.ac-display {
  /* Grand, editorial — prospectus covers, hero headlines */
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.ac-h1 {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.ac-h2 {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.ac-h3 {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.ac-h4 {
  font-family: var(--ff-sans-cond);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg);
}

.ac-lede {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  color: var(--fg-muted);
}

.ac-body {
  font-family: var(--ff-serif-web);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-prose);
  color: var(--fg);
}

.ac-body-sans {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-prose);
  color: var(--fg);
}

.ac-caption {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-normal);
}

.ac-smallcaps {
  /* The signature APPLEBY COLLEGE treatment */
  font-family: var(--ff-serif-alt);
  font-variant: small-caps;
  font-feature-settings: "smcp";
  letter-spacing: var(--tracking-wider);
  text-transform: lowercase;
}

.ac-script {
  font-family: var(--ff-script);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.ac-athletic {
  /* News Gothic Bold Condensed UPPERCASE — athletic marks, tickers */
  font-family: var(--ff-sans-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.ac-motto {
  /* "Nec temere, nec timide" */
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* =============================================================
   BASE ELEMENT DEFAULTS (opt-in via .ac-prose wrapper)
   ============================================================= */

.ac-prose { color: var(--fg); font-family: var(--ff-serif-web); line-height: var(--lh-prose); }
.ac-prose h1 { font: 500 var(--fs-3xl)/var(--lh-snug) var(--ff-serif); letter-spacing: var(--tracking-tight); margin: 0 0 var(--sp-5); }
.ac-prose h2 { font: 500 var(--fs-2xl)/var(--lh-snug) var(--ff-serif); margin: var(--sp-7) 0 var(--sp-4); }
.ac-prose h3 { font: 600 var(--fs-xl)/var(--lh-snug) var(--ff-serif); margin: var(--sp-6) 0 var(--sp-3); }
.ac-prose p  { margin: 0 0 var(--sp-4); max-width: 68ch; }
.ac-prose a  { color: var(--fg-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.ac-prose a:hover { color: var(--fg-link-hover); text-decoration-thickness: 2px; }
.ac-prose blockquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg);
  border-left: 3px solid var(--accent-soft);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0;
}