/* =========================================================================
   Seymoura — Colors & Type
   Design tokens + semantic element styles.
   Fonts are loaded from Google Fonts as substitutes until brand font files
   are provided. See README.md → Typography.
   ========================================================================= */

/* Poppins — brand-provided, static TTFs, full weight range 100–900 + italics */
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Thin.ttf') format('truetype');         font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ThinItalic.ttf') format('truetype');   font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraLight.ttf') format('truetype');       font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Light.ttf') format('truetype');       font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Regular.ttf') format('truetype');     font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Italic.ttf') format('truetype');      font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Medium.ttf') format('truetype');       font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-SemiBold.ttf') format('truetype');       font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Bold.ttf') format('truetype');       font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraBold.ttf') format('truetype');       font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Black.ttf') format('truetype');       font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; font-display:swap; }

/* Fraunces — brand-provided variable font (SOFT, WONK, opsz, wght axes) */
@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;
}

:root {
  /* ---------- Brand palette (core) ---------- */
  --coral:          #FF3B3F;   /* Bright Coral — energy, engagement, confidence */
  --coral-600:      #E62E32;   /* hover / pressed for coral */
  --coral-200:      #FFC7C8;   /* tints / bg washes */
  --coral-50:       #FFF1F2;   /* surface wash */

  --navy:           #002A5C;   /* Deep Navy — trust, intelligence, credibility */
  --navy-800:       #001E44;   /* pressed / deep accent */
  --navy-600:       #163E73;   /* hover on navy */
  --navy-200:       #B7C4D6;   /* muted / dividers on navy fields */
  --navy-50:        #EEF2F8;

  --mustard:        #FFC845;   /* Mustard — warmth, curiosity, optimism */
  --mustard-600:    #D99F1F;
  --mustard-200:    #FBE4A8;
  --mustard-50:     #FEF7E3;

  /* ---------- Neutrals (cream-leaning, not cold grey) ---------- */
  --paper:          #FBF8F3;   /* page / default surface — warm off-white */
  --paper-2:        #F4EFE6;   /* alt surface / subtle sections */
  --ink:            #0E1A2B;   /* near-black, tinted navy */
  --ink-2:          #3A4656;   /* body text */
  --ink-3:          #6B7689;   /* secondary text */
  --ink-4:          #9AA3B2;   /* placeholder / disabled text */
  --line:           #E6DFD2;   /* hairline borders on paper */
  --line-strong:    #D3C9B4;

  /* ---------- Semantic: foreground ---------- */
  --fg-1:           var(--ink);
  --fg-2:           var(--ink-2);
  --fg-3:           var(--ink-3);
  --fg-muted:       var(--ink-4);
  --fg-on-coral:    #FFFFFF;
  --fg-on-navy:     #FFFFFF;
  --fg-on-mustard:  var(--navy);   /* mustard is warm — navy text reads best */

  /* ---------- Semantic: backgrounds ---------- */
  --bg:             var(--paper);
  --bg-2:           var(--paper-2);
  --bg-inverse:     var(--navy);
  --bg-accent:      var(--coral);
  --bg-warm:        var(--mustard-50);

  /* ---------- Semantic: state ---------- */
  --success:        #2E9E6A;
  --warning:        var(--mustard-600);
  --danger:         var(--coral-600);
  --info:           var(--navy-600);

  /* ---------- Focus / interaction ---------- */
  --focus-ring:     0 0 0 3px rgba(255, 59, 63, 0.32);
  --focus-ring-navy:0 0 0 3px rgba(0, 42, 92, 0.28);

  /* ---------- Typography ---------- */
  --font-display:   'Fraunces', 'Times New Roman', serif;   /* editorial, warm, school-book feel */
  --font-text:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* geometric humanist, close to the wordmark */
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular, 1.2 on small, 1.25 on large) */
  --fs-12:   0.75rem;
  --fs-14:   0.875rem;
  --fs-16:   1rem;
  --fs-18:   1.125rem;
  --fs-20:   1.25rem;
  --fs-24:   1.5rem;
  --fs-30:   1.875rem;
  --fs-36:   2.25rem;
  --fs-48:   3rem;
  --fs-60:   3.75rem;
  --fs-80:   5rem;

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, warm, never cool-grey) ---------- */
  --sh-1:  0 1px 2px rgba(14, 26, 43, 0.06), 0 1px 1px rgba(14, 26, 43, 0.04);
  --sh-2:  0 4px 12px rgba(14, 26, 43, 0.08), 0 2px 4px rgba(14, 26, 43, 0.04);
  --sh-3:  0 12px 28px rgba(14, 26, 43, 0.10), 0 4px 8px rgba(14, 26, 43, 0.05);
  --sh-4:  0 24px 56px rgba(14, 26, 43, 0.14), 0 8px 16px rgba(14, 26, 43, 0.06);
  --sh-coral: 0 10px 30px rgba(255, 59, 63, 0.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* gentle overshoot for playful moments */
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html, body {
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Fraunces, warm editorial serif (matches Seymoura wordmark's warm curves) */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-36), 4.5vw + 0.5rem, var(--fs-60));
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-24), 2.4vw + 0.5rem, var(--fs-36));
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.25;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: 1.3;
  color: var(--fg-1);
}

/* Eyebrow / overline */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

/* Body */
p, .body {
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-text);
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--fg-2);
}

small, .small {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

.caption {
  font-size: var(--fs-12);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* Links */
a {
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--coral-600); border-bottom-color: currentColor; }

/* Code */
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.08em 0.4em;
  border-radius: var(--r-xs);
  color: var(--ink);
}

/* Hr */
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }

/* Selection */
::selection { background: var(--mustard-200); color: var(--navy); }