/* =====================================================================
   Global Vision Online — Design Tokens
   Online learning program of Global Vision Christian School Broadfording
   Primary blue sampled directly from the brand logo: rgb(15,108,182)
   ===================================================================== */

/* ----- Webfonts ----------------------------------------------------
   Trajan Pro    → THE brand titling face (self-hosted from the user's
                   uploaded file). Capitals only — lowercase codepoints
                   render as smaller caps. Used for the wordmark, eyebrows,
                   and large H1/H2 titling. Never for running body text.
   Source Serif 4 → scholarly serif for sub-headings, leads & pull quotes.
   Source Sans 3  → clean humanist UI / long-form body text.
   -------------------------------------------------------------------- */
@font-face {
  font-family: 'Trajan Pro';
  src: url('fonts/TrajanPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- Brand color ---------- */
  --gvo-blue:        #0F6CB6;  /* primary — straight from the logo */
  --gvo-blue-600:    #0C5C9E;  /* hover / pressed primary */
  --gvo-blue-700:    #0A4E86;
  --gvo-navy:        #0B2E52;  /* institutional depth, headings on light */
  --gvo-navy-900:    #061F39;  /* footer, deepest ground */
  --gvo-sky:         #E8F1F9;  /* pale blue tint background */
  --gvo-sky-200:     #D3E4F3;

  /* Academic gold — chosen complement to the blue (see README). */
  --gvo-gold:        #C49A3D;
  --gvo-gold-600:    #A87E27;
  --gvo-gold-tint:   #F6EEDB;

  /* ---------- Neutrals (cool-leaning paper + ink) ---------- */
  --paper:           #FFFFFF;
  --bg-soft:         #F6F8FB;  /* section alternation */
  --bg-mist:         #EEF2F7;
  --line:            #E2E8F0;  /* hairline borders */
  --line-strong:     #CBD5E1;

  --fg-1:            #0F1F33;  /* primary ink (near-navy) */
  --fg-2:            #44566B;  /* secondary text */
  --fg-3:            #7A8AA0;  /* muted / captions */
  --fg-on-dark:      #F4F8FC;  /* text on navy/blue */
  --fg-on-dark-mut:  #A9C2D8;

  /* ---------- Semantic ---------- */
  --success:         #2E7D52;
  --warning:         #B8860B;
  --danger:          #C0392B;
  --info:            var(--gvo-blue);

  /* ---------- Typography families ---------- */
  --font-display:    'Trajan Pro', Georgia, 'Times New Roman', serif;    /* brand Roman caps */
  --font-serif:      'Source Serif 4', Georgia, 'Times New Roman', serif; /* headings */
  --font-sans:       'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---------- Type scale (1.250 major-third, 16px root) ---------- */
  --fs-eyebrow:  0.8125rem; /* 13px — Trajan caps, tracked */
  --fs-small:    0.875rem;  /* 14px */
  --fs-body:     1.0625rem; /* 17px — comfortable reading */
  --fs-lead:     1.25rem;   /* 20px — intro paragraphs */
  --fs-h6:       1.125rem;  /* 18px */
  --fs-h5:       1.375rem;  /* 22px */
  --fs-h4:       1.75rem;   /* 28px */
  --fs-h3:       2.25rem;   /* 36px */
  --fs-h2:       3rem;      /* 48px */
  --fs-h1:       3.75rem;   /* 60px */
  --fs-display:  clamp(3.5rem, 6vw, 5.5rem);

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.6;
  --tracking-caps: 0.18em;  /* Trajan eyebrows */
  --tracking-tight: -0.01em;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --r-xs: 3px;   /* buttons, inputs — institutional, restrained */
  --r-sm: 6px;
  --r-md: 10px;  /* cards */
  --r-lg: 18px;  /* feature panels */
  --r-pill: 999px;

  /* ---------- Elevation (soft, blue-tinted) ---------- */
  --sh-1: 0 1px 2px rgba(11,46,82,0.06), 0 1px 3px rgba(11,46,82,0.08);
  --sh-2: 0 4px 12px rgba(11,46,82,0.08), 0 2px 4px rgba(11,46,82,0.06);
  --sh-3: 0 12px 32px rgba(11,46,82,0.12), 0 4px 8px rgba(11,46,82,0.06);
  --sh-focus: 0 0 0 3px rgba(15,108,182,0.30);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur: 200ms;
}

/* =====================================================================
   Semantic element defaults
   ===================================================================== */
.gvo-body { font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: var(--lh-normal); color: var(--fg-1); -webkit-font-smoothing: antialiased; }

.eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--gvo-blue);
}
h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1);
  line-height: 1.12; letter-spacing: 0.02em; color: var(--gvo-navy); }
h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2);
  line-height: 1.14; letter-spacing: 0.02em; color: var(--gvo-navy); }
h3, .h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3);
  line-height: var(--lh-snug); color: var(--gvo-navy); }
h4, .h4 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h4);
  line-height: var(--lh-snug); color: var(--gvo-navy); }
h5, .h5 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h5);
  line-height: var(--lh-snug); color: var(--fg-1); }
h6, .h6 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h6);
  line-height: var(--lh-snug); color: var(--fg-1); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg-2);
  font-family: var(--font-sans); }
p { margin: 0 0 1em; }
.small, small { font-size: var(--fs-small); color: var(--fg-3); }