/* =============================================================
   The National Center for Student Agency — Foundations
   colors_and_type.css

   Three-color identity:
     • Gold      — identity & action
     • Navy      — structure & authority (also: body text)
     • Off-white — breathing room (page default)

   Pure black is BANNED. Use --navy for "black".
   Pure white is allowed for component surfaces only.
   ============================================================= */

/* ---------- Fonts ------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/CormorantGaramond-VariableFont.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Italic-VariableFont.ttf") format("truetype-variations");
}

:root {
  /* =========================================================
     COLORS — core identity
     ========================================================= */

  /* Gold — identity & action */
  --gold:          #C2982A;   /* base gold — warm, heritage */
  --gold-deep:     #9C7916;   /* hover state on light surfaces */
  --gold-light:    #E8C674;   /* on-navy accents, illustration tints */
  --gold-pale:     #F4E4B8;   /* highlight blocks on off-white */

  /* Navy — structure & authority */
  --navy:          #0F2A47;   /* base navy — body text default */
  --navy-deep:     #08182A;   /* darkest — dark-mode background */
  --navy-soft:     #2A4567;   /* secondary text, captions */
  --navy-mute:     #6B7E96;   /* tertiary text, meta */
  --navy-line:     #D6DCE4;   /* hairlines, table borders on light */
  --navy-tint:     #EAEEF3;   /* subtle fills on light */

  /* Off-white — breathing room */
  --offwhite:      #F5EFE2;   /* page default */
  --offwhite-2:    #EFE7D3;   /* alt rows, raised offwhite */
  --cream-line:    #E6DCC1;   /* hairline on off-white */

  /* Pure surfaces (allowed for inputs / modals only) */
  --surface:       #FFFFFF;
  --surface-shadow: rgba(15, 42, 71, 0.08);

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */

  /* Foreground (on light) */
  --fg-1: var(--navy);          /* primary text */
  --fg-2: var(--navy-soft);     /* secondary text */
  --fg-3: var(--navy-mute);     /* tertiary / meta */
  --fg-accent: var(--gold);     /* >=28px headings, all-caps labels on navy */

  /* Foreground (on navy) */
  --fg-on-navy-1: var(--offwhite);
  --fg-on-navy-2: #C7D2E0;
  --fg-on-navy-3: #8FA0B8;          /* tertiary / meta on navy */
  --fg-on-navy-accent: var(--gold-light);

  /* Backgrounds */
  --bg-page:      var(--offwhite);
  --bg-card:      var(--offwhite);     /* card on page reads as page; use surface for raised */
  --bg-raised:    var(--surface);      /* white card raised above off-white */
  --bg-inverse:   var(--navy);         /* nav, footer, dark surfaces */
  --bg-inverse-deep: var(--navy-deep);

  /* Lines / borders */
  --line:         var(--cream-line);
  --line-strong:  var(--navy);
  --line-on-navy: rgba(232, 198, 116, 0.25);

  /* Action / interactive */
  --action:           var(--gold);
  --action-hover:     var(--gold-deep);
  --action-on-navy:   var(--gold);
  --action-on-navy-hover: var(--gold-light);

  /* Link in body — navy underlined, gold on hover */
  --link:         var(--navy);
  --link-hover:   var(--gold-deep);
  --link-on-navy: var(--gold-light);

  /* States — semantic (used sparingly; tinted toward palette) */
  --success: #2E6B4A;
  --success-bg: #DDEAE0;
  --warning: var(--gold-deep);
  --warning-bg: var(--gold-pale);
  --danger:  #9A3221;
  --danger-bg: #F3DDD6;
  --info:    var(--navy-soft);
  --info-bg: var(--navy-tint);

  /* Disabled — 40% opacity of the relevant color (no grey) */
  --disabled-opacity: 0.4;  /* @kind other */

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(194, 152, 42, 0.45);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --font-serif: "Cormorant Garamond", "Garamond", "Iowan Old Style", "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* Type scale (perfect fourth-ish, modulated) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  80px;
  --fs-6xl:  112px;

  --lh-tight:   1.06;  /* @kind other */
  --lh-snug:    1.18;  /* @kind other */
  --lh-normal:  1.5;   /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.14em;   /* all-caps labels */

  /* =========================================================
     SPACING (4px base)
     ========================================================= */
  --sp-0: 0;  /* @kind spacing */
  --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;
  --sp-11: 192px;

  /* =========================================================
     RADII — restrained. Editorial rather than friendly-app.
     ========================================================= */
  --r-0:  0;  /* @kind radius */
  --r-1:  2px;
  --r-2:  4px;       /* default for inputs, badges */
  --r-3:  8px;       /* cards */
  --r-4:  14px;      /* large feature cards */
  --r-pill: 999px;

  /* =========================================================
     ELEVATION — sparing. Editorial weight, not floating-UI feel.
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(15, 42, 71, 0.06);
  --shadow-2: 0 6px 18px rgba(15, 42, 71, 0.08);
  --shadow-3: 0 18px 38px rgba(15, 42, 71, 0.12);
  --shadow-4: 0 30px 60px rgba(15, 42, 71, 0.28);   /* dramatic — modal scrim, hero cover mock */
  --shadow-inset: inset 0 0 0 1px var(--cream-line);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */ /* gentle ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-1: 120ms;  /* @kind other */
  --dur-2: 200ms;  /* @kind other */
  --dur-3: 320ms;  /* @kind other */
}

/* =========================================================
   BASE — applied to body
   ========================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   SEMANTIC TYPE — utility classes that mirror real-world usage
   ========================================================= */

.t-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-display--xl { font-size: var(--fs-6xl); }

.t-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.t-body--lg { font-size: var(--fs-md); }

.t-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-label--gold {
  color: var(--gold);
}

.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* =========================================================
   LINK in body — navy underlined, gold on hover
   ========================================================= */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--link-hover); }

/* on dark surfaces */
.on-navy a { color: var(--link-on-navy); }
.on-navy a:hover { color: var(--gold-light); }

/* Selection */
::selection {
  background: var(--gold-pale);
  color: var(--navy);
}

/* =========================================================
   FOCUS RING — applied globally to keyboard-focused
   interactives. 3px gold at 45% opacity, offset 2px.
   Accessibility is non-negotiable.
   ========================================================= */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-1);
}
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}