/* ============================================================
   Leaving School — Foundations
   Colours, typography, spacing, radii, shadows
   Source: brand-system.md / leaving-school-claude-design-brief.md
   ============================================================ */

/* ---------- Webfonts ----------
   Fraunces ships locally (brand upload) — variable font with opsz + wght axes.
   Inter is still pulled from Google Fonts; no local file provided. */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ========== Brand Colours ========== */
  --midnight-ink:    #1B2332;  /* Primary dark — hero, headlines, dominant surface */
  --warm-stone:      #E8E2D8;  /* Primary light — page bg, card surfaces */
  --burnished-gold:  #C49A3C;  /* Accent — CTAs, single-point highlights. Sparingly. */
  --soft-sage:       #8FA68E;  /* Secondary accent — tags, step markers. Restricted use. */
  --paper-white:     #FAF8F5;  /* Neutral — text bg, light sections, negative space */
  --muted-text:      #6B7280;  /* Supporting copy only — text, not bg or borders */

  /* ========== Semantic Surface ========== */
  --surface-dark:    var(--midnight-ink);
  --surface-stone:   var(--warm-stone);
  --surface-paper:   var(--paper-white);

  /* ========== Semantic Foreground ========== */
  --fg1:             var(--midnight-ink);        /* Primary text on light */
  --fg2:             var(--muted-text);          /* Secondary / supporting text */
  --fg-on-dark:      var(--paper-white);         /* Primary text on dark */
  --fg-on-dark-2:    rgba(250, 248, 245, 0.70);  /* Secondary text on dark */
  --fg-on-dark-3:    rgba(250, 248, 245, 0.45);  /* Tertiary text on dark (labels) */

  /* ========== Accents ========== */
  --accent:          var(--burnished-gold);
  --accent-hover:    #B38A30;   /* Gold, one step darker for hover */
  --accent-on-dark:  var(--burnished-gold);
  --secondary:       var(--soft-sage);

  /* ========== Borders ========== */
  --border-ink:      rgba(27, 35, 50, 0.10);
  --border-ink-strong: rgba(27, 35, 50, 0.18);
  --border-gold:     rgba(196, 154, 60, 0.25);
  --border-paper:    rgba(250, 248, 245, 0.15);

  /* ========== Functional / State ========== */
  --success-bg:      rgba(143, 166, 142, 0.15);
  --success-border:  #8FA68E;
  --success-text:    #1B2332;

  --error-bg:        #E8D8D8;
  --error-border:    #C97070;
  --error-text:      #7A3030;

  --warning-bg:      #E8E2D8;
  --warning-border:  #C49A3C;
  --warning-text:    #8B6914;

  /* ========== Type Families ========== */
  --font-display:    'Fraunces', Georgia, 'Times New Roman', Times, serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ========== Type Scale (desktop) ========== */
  --type-h1:         clamp(40px, 5vw, 56px);
  --type-h2:         clamp(28px, 3.2vw, 36px);
  --type-h3:         clamp(22px, 2.4vw, 26px);
  --type-body-lg:    18px;
  --type-body:       16px;
  --type-small:      14px;
  --type-caption:    13px;

  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-body:    1.65;
  --leading-loose:   1.7;

  --tracking-label:  0.08em;
  --tracking-tight:  -0.01em;

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

  /* ========== Radii ========== */
  --radius-sm:   2px;   /* Email CTAs — minimal */
  --radius:      6px;   /* Default cards, inputs, badges */
  --radius-md:   8px;   /* Web CTAs */
  --radius-lg:   12px;  /* Large feature panels */

  /* ========== Shadows ==========
     The brand avoids heavy elevation — shadows are whispers, not announcements. */
  --shadow-xs:   0 1px 2px rgba(27, 35, 50, 0.04);
  --shadow-sm:   0 2px 6px rgba(27, 35, 50, 0.06);
  --shadow-md:   0 8px 24px rgba(27, 35, 50, 0.08);
  --shadow-lg:   0 24px 60px rgba(27, 35, 50, 0.12);

  /* ========== Motion ========== */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dur-fast:      150ms;
  --dur-base:      220ms;
  --dur-slow:      360ms;

  /* ========== Layout ========== */
  --container:       1200px;
  --container-tight: 720px;
  --reading-width:   640px;
}

/* ============================================================
   Base element styles — safe defaults matching the brand.
   Use `.ls` as a scoping class if you don't want globals.
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body, .ls {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--fg1);
  background: var(--surface-paper);
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h1);
  line-height: var(--leading-tight);
  color: var(--fg1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: var(--leading-snug);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  color: var(--fg1);
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--fg1);
  text-wrap: pretty;
}
.body-lg { font-size: var(--type-body-lg); line-height: var(--leading-body); }
.small    { font-size: var(--type-small); color: var(--fg2); }

.eyebrow, .label, .caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg1);
}
.eyebrow-gold { color: var(--accent); }
.muted        { color: var(--fg2); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border-ink);
  margin: var(--space-10) 0;
}

a {
  color: var(--fg1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-ink-strong);
  transition: text-decoration-color var(--dur-base) var(--ease-standard);
}
a:hover { text-decoration-color: var(--accent); }

/* Selection */
::selection { background: var(--burnished-gold); color: var(--midnight-ink); }