/* ─────────────────────────────────────────────────────────
   POVSwathy — Foundations
   Colors + Type tokens for the personal brand.
   Visual reference: Goal Digger Podcast aesthetic — editorial
   serif, terracotta + periwinkle + cream, hand-drawn accents,
   all-caps mono labels.
   ───────────────────────────────────────────────────────── */

/* ─── FONTS ──────────────────────────────────────────────── */
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("./fonts/Oswald-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("./fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── BRAND PALETTE ──────────────────────────────────── */

  /* Hero — periwinkle blue, the signature "calm but confident" backdrop */
  --pov-periwinkle:        #8E9BC8;
  --pov-periwinkle-deep:   #6F7FB3;
  --pov-periwinkle-soft:   #B6C0DE;

  /* Sky — the lighter blue used for testimonials and quiet sections */
  --pov-sky:               #C7DCE8;
  --pov-sky-deep:          #A8C4D6;

  /* Terracotta — the loud, warm orange used for buttons + section blocks */
  --pov-terracotta:        #DD6B3A;
  --pov-terracotta-deep:   #B85327;
  --pov-terracotta-soft:   #ECA888;

  /* Blush — soft pink used in display type over orange, and pill buttons */
  --pov-blush:             #F2C3C5;
  --pov-blush-deep:        #E8A0A4;

  /* Sun — buttery yellow for CTAs and badge fills */
  --pov-sun:               #F4E36A;
  --pov-sun-deep:          #E8D34A;
  --pov-sun-soft:          #FAF1B5;

  /* Cream + Ink — the neutrals */
  --pov-cream:             #FBF6EF;
  --pov-paper:             #F5EEE3;
  --pov-ink:               #1A1714;
  --pov-ink-soft:          #3A332C;
  --pov-charcoal:          #2A2825;

  /* Mid greys — for borders and faint dividers */
  --pov-line:              #E6DFD3;
  --pov-mute:              #8E867A;

  /* ─── SEMANTIC SURFACES ─────────────────────────────── */
  --bg:                    var(--pov-cream);
  --bg-quiet:              var(--pov-paper);
  --bg-bold:               var(--pov-periwinkle);   /* the hero backdrop */
  --bg-loud:               var(--pov-terracotta);   /* the section break */
  --bg-soft:               var(--pov-sky);
  --bg-ink:                var(--pov-ink);

  --fg:                    var(--pov-ink);
  --fg-soft:               var(--pov-ink-soft);
  --fg-mute:               var(--pov-mute);
  --fg-on-bold:            var(--pov-cream);        /* white-ish on periwinkle */
  --fg-on-loud:            var(--pov-cream);        /* white-ish on terracotta */
  --fg-on-ink:             var(--pov-cream);

  --accent:                var(--pov-terracotta);
  --accent-warm:           var(--pov-sun);
  --accent-cool:           var(--pov-periwinkle);

  --line:                  var(--pov-line);

  /* ─── TYPE FAMILIES ─────────────────────────────────── */
  --font-display:          "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-label:            "Oswald", "Bebas Neue", Impact, sans-serif;
  --font-body:             "DM Sans", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-mono:             "Space Mono", "JetBrains Mono", "IBM Plex Mono", monospace;
  --font-script:           "Caveat", "Permanent Marker", cursive; /* hand-drawn accents */

  /* ─── TYPE SIZES ────────────────────────────────────── */
  --fs-display-xl:         clamp(64px, 9vw, 144px);  /* GOAL DIGGER monumental */
  --fs-display-l:          clamp(48px, 6vw, 88px);   /* page headlines */
  --fs-display-m:          clamp(36px, 4vw, 56px);
  --fs-h1:                 40px;
  --fs-h2:                 32px;
  --fs-h3:                 24px;
  --fs-h4:                 18px;
  --fs-body:               17px;
  --fs-body-s:             15px;
  --fs-small:              13px;
  --fs-label:              12px;   /* Oswald + mono, tracked */
  --fs-script:             clamp(28px, 3.5vw, 56px);

  /* ─── RADII / SHADOW / SPACE ────────────────────────── */
  --radius-xs:             4px;
  --radius-sm:             6px;
  --radius-md:             12px;
  --radius-pill:           999px;
  --radius-block:          0px;     /* hard rectangles dominate */

  --shadow-card:           0 1px 0 rgba(26,23,20,0.06), 0 12px 28px -16px rgba(26,23,20,0.18);
  --shadow-lift:           0 24px 60px -28px rgba(26,23,20,0.32);
  --shadow-press:          inset 0 2px 0 rgba(26,23,20,0.12);

  --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;

  --maxw-text:             68ch;
  --maxw-page:             1180px;
}

/* ─── SEMANTIC ELEMENTS ──────────────────────────────────── */
.pov-display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.pov-display,
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg);
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg);
}
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}

.pov-eyebrow,
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.pov-label,
.label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

p, .pov-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-soft);
}
p.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg);
}

.pov-mono,
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  letter-spacing: 0;
  color: var(--fg);
}

.pov-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-script);
  line-height: 1;
  color: var(--fg);
}

a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}