/* =========================================================================
   Tideveil — Colors & Type tokens
   Sampled from the official Tideveil sticker, monogram, and stationery.
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('https://fonts.gstatic.com/s/fraunces/v32/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('https://fonts.gstatic.com/s/fraunces/v32/6NUh8FyLNQOQZAnv9bYEvDgIeE9Ea92uemAk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* Imported via Google Fonts as a backup if the @font-face above fails */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --tv-cream:        #F7F5F1;   /* primary surface — sticker / sticker bg */
  --tv-navy:         #1F2E35;   /* primary ink — wordmark */
  --tv-slate:        #5F696D;   /* secondary ink — supporting text */
  --tv-sand:         #D7BF99;   /* signature warm — business card field */

  /* ---------- NEUTRALS (warm, paper-leaning) ---------- */
  --tv-paper:        #FBFAF7;   /* lifted surface */
  --tv-bone:         #EFEBE3;   /* card / divider tint */
  --tv-fog:          #C9C5BD;   /* hairline / disabled */
  --tv-dusk:         #8A8881;   /* tertiary text */
  --tv-ink:          #15212A;   /* deepest text, near-black */

  /* ---------- ACCENTS (used sparingly, editorial) ---------- */
  --tv-tide:         #4A6670;   /* muted teal-blue, "tide" */
  --tv-veil:         #B7C4C9;   /* pale tide — backgrounds, washes */
  --tv-clay:         #9B6A4A;   /* secondary warm — accents, links on cream */
  --tv-rust:         #7A3B2E;   /* alert / highlight, rare use */

  /* ---------- SEMANTIC — TEXT ---------- */
  --fg-1: var(--tv-navy);       /* primary text */
  --fg-2: var(--tv-slate);      /* secondary text */
  --fg-3: var(--tv-dusk);       /* tertiary / metadata */
  --fg-inverse: var(--tv-cream);
  --fg-link: var(--tv-clay);

  /* ---------- SEMANTIC — SURFACE ---------- */
  --bg-1: var(--tv-cream);      /* canvas */
  --bg-2: var(--tv-paper);      /* card */
  --bg-3: var(--tv-bone);       /* recessed / tag */
  --bg-inverse: var(--tv-navy);
  --bg-warm: var(--tv-sand);    /* feature surface */

  --border-1: rgba(31,46,53,0.10);
  --border-2: rgba(31,46,53,0.20);
  --hairline: 1px solid var(--border-1);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-sans:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (1.250 minor third, generous) ---------- */
  --fs-12: 0.75rem;     /* 12 — eyebrow / micro */
  --fs-14: 0.875rem;    /* 14 — fine print */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body large */
  --fs-22: 1.375rem;    /* 22 — lede */
  --fs-28: 1.75rem;     /* 28 — H4 */
  --fs-36: 2.25rem;     /* 36 — H3 */
  --fs-48: 3rem;        /* 48 — H2 */
  --fs-64: 4rem;        /* 64 — H1 */
  --fs-96: 6rem;        /* 96 — Display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-base:    0em;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrows */

  /* ---------- SPACING (8pt base, but with editorial 4 / 12 / 24 rhythm) ---------- */
  --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;

  /* ---------- RADII (restrained — almost square) ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- ELEVATION (whisper-light; no chunky drop shadows) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(31,46,53,0.06);
  --shadow-2: 0 1px 2px rgba(31,46,53,0.06), 0 0 0 1px rgba(31,46,53,0.04);
  --shadow-3: 0 8px 24px -12px rgba(31,46,53,0.18);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0.0, 0.8, 0.2);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =========================================================================
   SEMANTIC TYPE PRESETS
   ========================================================================= */

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 6vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 72;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-base);
  color: var(--fg-1);
}
.t-lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-22);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-14);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* element-level defaults — opt in by setting body to .tv */
.tv {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tv h1 { @extend .t-h1; }
.tv h2 { @extend .t-h2; }
.tv h3 { @extend .t-h3; }
.tv h4 { @extend .t-h4; }
.tv p  { margin: 0 0 var(--sp-4); }
.tv a  { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid currentColor; }
.tv a:hover { color: var(--tv-navy); }