/* ============================================
   LYNT Design System — Colors & Type
   ============================================ */

/* -------- Fonts -------- */
@font-face {
  font-family: "Gopher";
  src: url("../fonts/gopher_bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gopher";
  src: url("../fonts/gopher_heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   :root — Tokens
   ============================================ */
:root {
  /* -------- Brand / Logo colors -------- */
  --lynt-teal:       #39CFB9;  /* Y bottom branch */
  --lynt-periwinkle: #94A5F5;  /* Y left branch */
  --lynt-coral:      #FBA89D;  /* Y right branch */
  --lynt-amber:      #FFC364;  /* CTA / accent */
  --lynt-dark:       #393939;  /* text / monochrome logo */

  /* -------- Original palette -------- */
  --teal-original:       #39CFB9;
  --periwinkle-original: #94A5F5;
  --coral-original:      #FBA89D;
  --amber-original:      #FFC364;

  /* -------- Dark palette (deep accents) -------- */
  --teal-dark:       #1C7366;
  --periwinkle-dark: #6073CD;
  --coral-dark:      #ED7C6D;
  --amber-dark:      #F5A300;

  /* -------- Light palette (soft fills) -------- */
  --teal-light:       #7AE6D9;
  --periwinkle-light: #C2CDFA;
  --coral-light:      #FDCFC8;
  --amber-light:      #FFE2A7;

  /* -------- Lighter palette (subtle backgrounds) -------- */
  --teal-lighter:       #DDF8F5;
  --periwinkle-lighter: #EDF1FD;
  --coral-lighter:      #FEEEEB;
  --amber-lighter:      #FFF1D6;

  /* -------- Neutrals -------- */
  --ink:     #393939;
  --ink-70:  rgba(57, 57, 57, 0.70);
  --ink-50:  rgba(57, 57, 57, 0.50);
  --ink-30:  rgba(57, 57, 57, 0.30);
  --ink-15:  rgba(57, 57, 57, 0.15);

  --surface:        #FFFFFF;
  --surface-muted:  #F4F3FB;   /* page bg — soft peri-tinted off-white (web hero bg) */
  --surface-cream:  #F5F1EA;   /* warm cream — for slide/section blocks */
  --surface-sunken: #E8EAF3;
  --surface-peri:   #8190E5;   /* periwinkle band — for dark sections (web team band) */
  --surface-dark:   #2F3B5C;   /* deep navy — reserved for deep slide variants */

  /* -------- Semantic foreground -------- */
  --fg-1: var(--ink);           /* primary text / headings */
  --fg-2: var(--ink-70);        /* body secondary */
  --fg-3: var(--ink-50);        /* captions, meta */
  --fg-4: var(--ink-30);        /* disabled */
  --fg-inverse: #FFFFFF;        /* text on dark surfaces */

  /* -------- Semantic backgrounds -------- */
  --bg-page:   var(--surface-muted);
  --bg-card:   var(--surface);
  --bg-cream:  var(--surface-cream);
  --bg-peri:   var(--surface-peri);
  --bg-dark:   var(--surface-dark);

  /* -------- Accent utility -------- */
  --link:          var(--periwinkle-dark);
  --link-hover:    var(--ink);
  --underline:     var(--amber-original);   /* handwritten-underline accent */
  --cta-bg:        var(--amber-original);
  --cta-bg-hover:  var(--amber-dark);
  --cta-fg:        var(--ink);

  /* -------- Radii (all soft, generous) -------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;
  --radius-blob: 48% 52% 54% 46% / 52% 48% 52% 48%; /* org. blob for photos */

  /* -------- Spacing -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* -------- Borders -------- */
  --border-hairline: 1px solid var(--ink-15);
  --border-soft:     1px solid rgba(57,57,57,0.08);
  --border-pill-dark: 1.5px solid var(--ink);

  /* -------- Shadows (used sparingly — brand is flat) -------- */
  --shadow-card: 0 2px 14px rgba(57,57,57,0.06);
  --shadow-lift: 0 8px 30px rgba(57,57,57,0.08);
  --shadow-none: none;

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;

  /* -------- Type families -------- */
  --font-display: "Gopher", "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -------- Type scale (display = Gopher Bold/Heavy) -------- */
  --fs-display: 72px;   /* big hero */
  --fs-h1:      52px;
  --fs-h2:      40px;
  --fs-h3:      30px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-eyebrow: 13px;  /* UPPERCASE label */

  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --track-eyebrow: 0.14em;
  --track-caps:    0.06em;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-tight);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p { margin: 0; color: var(--fg-2); line-height: var(--lh-loose); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

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

code, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* ============================================
   Utility classes
   ============================================ */
.lynt-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--periwinkle-dark);
}
.lynt-display  { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900; line-height: var(--lh-tight); letter-spacing: -0.02em; }
.lynt-lead     { font-size: var(--fs-lead); color: var(--fg-2); line-height: var(--lh-normal); }
.lynt-underline-accent {
  background-image: linear-gradient(transparent 62%, var(--amber-light) 62%, var(--amber-light) 92%, transparent 92%);
  background-repeat: no-repeat;
}

/* Handwritten underline accent (matches site's wavy underline under bold links) */
.lynt-wavy-underline {
  text-decoration: underline wavy var(--amber-original);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}