/* ============================================================
   A Place of HOPE — Design Tokens
   Source: GSM 2014 + live aplaceofhope.com (2026)
   Ported from _design-reference/colors_and_type.css
   ============================================================ */

/* ---------- Brand fonts ----------
   Museo Sans: weights 500 (regular + italic) and 900 (display).
   Missing weights (300, 400, 600, 700, 800) fall back to Mulish.
   Museo Slab: full weight range 100–1000.
   --------------------------------- */
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans_500.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans_500_Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSansCyrl-900.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_100.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_100italic.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_300.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_300italic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_500.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_500italic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_700.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_700italic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_900.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_900italic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_1000.otf') format('opentype'); font-weight: 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Slab'; src: url('../fonts/Museo_Slab_1000italic.otf') format('opentype'); font-weight: 1000; font-style: italic; font-display: swap; }

/* ---------- Metric-matched fallbacks ----------
   Eliminates layout shift (FOUT / CLS) during font-display: swap
   by sizing the system fallback to match Museo Sans glyph metrics.
   Covers ALL weights used in the theme (400, 500, 700, 900) so the
   fallback renders at identical dimensions regardless of browser
   font-size settings. Calculated from Museo Sans OS/2 tables vs Arial.
   ------------------------------------------------ */
@font-face {
  font-family: 'Museo Sans Fallback';
  src: local('Arial');
  font-weight: 400;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 20%;
  size-adjust: 123.5%;
}
@font-face {
  font-family: 'Museo Sans Fallback';
  src: local('Arial');
  font-weight: 500;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 20%;
  size-adjust: 123.5%;
}
@font-face {
  font-family: 'Museo Sans Fallback';
  src: local('Arial');
  font-weight: 700;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 20%;
  size-adjust: 130%;
}
@font-face {
  font-family: 'Museo Sans Fallback';
  src: local('Arial');
  font-weight: 900;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 20%;
  size-adjust: 138.9%;
}

:root {
  /* ---------- Brand color palette (GSM page 6) ---------- */
  --apoh-blue:          #246AB4;
  --apoh-blue-darker:   #1F5BA0;
  --apoh-blue-darkest:  #1A4F8E;
  --apoh-blue-tint:     #E9F0F9;

  --apoh-green:         #89BE40;
  --apoh-green-aa:      #4B7A12; /* WCAG AA contrast-safe green (5.1:1 on white) */
  --apoh-green-darker:  #3F6B0D;
  --apoh-green-darkest: #365E09;

  --apoh-orange:        #F7921E;
  --apoh-orange-aa:     #A85C00; /* WCAG AA contrast-safe orange (5.0:1 on white) */
  --apoh-orange-darker: #DE7F12;

  --apoh-gold:          #F4B72A;

  --apoh-gray:          #585961;
  --apoh-gray-2:        #6E7079;
  --apoh-gray-3:        #6B6D78; /* WCAG AA (5.1:1 on white, 4.7:1 on bg-page) */
  --apoh-gray-4:        #C7C8CC;

  /* ---------- Surface neutrals ---------- */
  --bg-page:            #F5F5F4;
  --bg-surface:         #FFFFFF;
  --bg-subtle:          #FAFAF9;
  --border-hairline:    #E7E7E5;
  --border-strong:      #D4D4D2;

  /* ---------- Foreground / semantic text ---------- */
  --fg-1:               var(--apoh-gray);
  --fg-2:               var(--apoh-gray-2);
  --fg-3:               var(--apoh-gray-3);
  --fg-display:         var(--apoh-blue);
  --fg-link:            var(--apoh-blue);
  --fg-emphasis:        var(--apoh-blue);
  --fg-on-blue:         #FFFFFF;
  --fg-on-green:        #FFFFFF;

  /* ---------- Nav (deep blue gradient) ---------- */
  --nav-grad-from:      #1F5FB3;
  --nav-grad-to:        #2A78C8;
  --nav-fg:             #FFFFFF;
  --nav-fg-dim:         rgba(255, 255, 255, 0.78);

  /* ---------- Type families ---------- */
  --font-sans:  'Museo Sans', 'Museo Sans Fallback', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-slab:  'Museo Slab', Georgia, 'Times New Roman', serif;

  /* ---------- Font sizes ---------- */
  --fs-display:   3.5rem;
  --fs-h1:        2.5rem;
  --fs-h2:        2rem;
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-h5:        1.0625rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-caption:   0.75rem;

  /* ---------- Line heights ---------- */
  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  /* ---------- Tracking ---------- */
  --tracking-display: -0.02em;
  --tracking-h1:      -0.015em;
  --tracking-h2:      -0.01em;
  --tracking-body:    0;
  --tracking-allcaps: 0.04em;

  /* ---------- Weights ---------- */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* ---------- Spacing scale ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Shadows (blue-tinted) ---------- */
  --shadow-sm:   0 1px 2px rgba(36, 106, 180, 0.06);
  --shadow-md:   0 2px 12px rgba(36, 106, 180, 0.08);
  --shadow-lg:   0 8px 32px rgba(36, 106, 180, 0.12);
  --shadow-card: 0 2px 12px rgba(36, 106, 180, 0.06), 0 0 0 1px rgba(36, 106, 180, 0.04);

  /* ---------- Layout ---------- */
  --container-max:     1280px;
  --container-padding: 24px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ---------- Step palette (Admissions Process) ---------- */
  --step-1: var(--apoh-gold);
  --step-2: var(--apoh-orange);
  --step-3: var(--apoh-green);
  --step-4: var(--apoh-blue);
}