/* ============================================================
   StyrkeForLivet — Design Tokens
   New Nordic × Considered Color × Diskret Glimmer
   ============================================================ */

/* --- Fonts (Google Fonts substitutes; see README for notes) --- */

:root {
  /* ============ COLOR — BASE: den nordiske ro ============ */
  --color-cream: #f2ead3;
  --color-surface: #faf3e8; /* warmer than before — leans toward clay */
  --color-paper: #ede3cc;
  --color-ink: #1f1a14;
  --color-ink-soft: #3a322a;
  --color-ink-warm: #2e1f18; /* dark surfaces — deep warm near-black */
  --color-stone: #b8b0a1;
  --color-stone-light: #d9d2c3;

  /* ============ COLOR — PRIMARY: sun-warmed clay ============ */
  --color-clay: #b85940; /* primary — warm terracotta, atletisk, jordnær */
  --color-clay-deep: #8e3f2c; /* hover / active */
  --color-clay-soft: #d78568;
  /* legacy aliases — old kits referencing aubergine continue to work */
  --color-aubergine: var(--color-clay);
  --color-aubergine-deep: var(--color-clay-deep);
  --color-aubergine-soft: var(--color-clay-soft);

  /* ============ COLOR — ACCENT: farve-mod, sparsomt ============ */
  --color-forest: #3d5240; /* secondary accent — blog, grounded moments */
  --color-forest-deep: #2a3b2c;
  --color-mustard: #d4a03a;
  --color-mustard-deep: #b5862a;
  --color-sage: #8a9a7b;
  --color-sage-soft: #b5c2a6;
  --color-rose: #d89292;
  --color-rose-soft: #e5b5b5;

  /* ============ COLOR — GLIMMER: visible gold (level 2 default) ============ */
  --color-gold: #c8a754;
  --color-gold-soft: #d4b66e;
  --color-gold-deep: #b8943e;
  /* foil-gradient — level 3, for premium moments (hero CTA, monthly milestone) */
  --gradient-foil: linear-gradient(
    110deg,
    #b8943e 0%,
    #c8a754 25%,
    #e5c97e 50%,
    #d4b66e 75%,
    #b8943e 100%
  );
  /* celebration — level 4 curated rainbow, ONLY for true milestones (100 days, marathon, anniversary) */
  --gradient-celebration: linear-gradient(
    110deg,
    #d89292 0%,
    #e8b888 22%,
    #d4b66e 44%,
    #a8b89a 66%,
    #b8a0c0 88%,
    #d89292 100%
  );

  /* ============ SEMANTIC COLOR ============ */
  --bg: var(--color-surface);
  --bg-elevated: var(--color-paper);
  --bg-deep: var(--color-cream);
  --bg-inverse: var(--color-ink-warm);
  --fg: var(--color-ink);
  --fg-soft: var(--color-ink-soft);
  --fg-muted: var(--color-stone);
  --fg-inverse: var(--color-surface);
  --border: #e2d9c5;
  --border-strong: var(--color-stone);
  --primary: var(--color-aubergine);
  --primary-hover: var(--color-aubergine-deep);
  --accent: var(--color-mustard);
  --accent-hover: var(--color-mustard-deep);
  --success: var(--color-sage);
  --warning: var(--color-clay);
  --info: var(--color-forest);
  --focus-ring: var(--color-gold);

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --font-display: 'Fraunces', 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Geist', 'Söhne', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ============ TYPOGRAPHY — SCALE ============ */
  --fs-12: 12px; /* micro / labels */
  --fs-13: 13px; /* secondary UI */
  --fs-14: 14px; /* small body */
  --fs-15: 15px; /* body small */
  --fs-16: 16px; /* body default */
  --fs-18: 18px; /* body large / lead */
  --fs-20: 20px; /* h5 */
  --fs-24: 24px; /* h4 */
  --fs-32: 32px; /* h3 */
  --fs-44: 44px; /* h2 */
  --fs-64: 64px; /* h1 */
  --fs-80: 80px; /* display / hero */

  /* line heights — generous for ADHD ease-of-read */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  /* ============ 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;

  /* ============ RADIUS ============ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ============ SHADOWS (warm-tinted, low) ============ */
  --shadow-xs: 0 1px 2px rgba(31, 26, 20, 0.04);
  --shadow-sm: 0 2px 6px rgba(31, 26, 20, 0.06), 0 1px 2px rgba(31, 26, 20, 0.04);
  --shadow-md: 0 6px 18px rgba(31, 26, 20, 0.08), 0 2px 4px rgba(31, 26, 20, 0.05);
  --shadow-lg: 0 18px 36px rgba(31, 26, 20, 0.1), 0 4px 8px rgba(31, 26, 20, 0.05);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-gold-focus: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-gold);

  /* ============ TIMING ============ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 400ms;
  --dur-glimmer: 600ms;

  /* ============ LAYOUT ============ */
  --container-narrow: 720px;
  --container: 1080px;
  --container-wide: 1280px;
  --container-full: 1440px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

html {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
}
body {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

/* Display — for hero / opener moments */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 50;
  color: var(--fg);
}

h1,
.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-variation-settings:
    'opsz' 80,
    'SOFT' 50;
  color: var(--fg);
  margin: 0;
}

h2,
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-44);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-variation-settings:
    'opsz' 48,
    'SOFT' 40;
  color: var(--fg);
  margin: 0;
}

h3,
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  font-weight: 450;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 30;
  color: var(--fg);
  margin: 0;
}

h4,
.t-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 500;
  font-variation-settings:
    'opsz' 24,
    'SOFT' 20;
  color: var(--fg);
  margin: 0;
}

h5,
.t-h5 {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  color: var(--fg);
  margin: 0;
}

p,
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  text-wrap: pretty;
  margin: 0;
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  font-weight: var(--fw-regular);
}

.t-small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.t-micro {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Eyebrow / category label */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--color-aubergine);
}

/* Editorial italic quote */
.t-quote {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-relaxed);
  font-style: italic;
  font-variation-settings:
    'opsz' 36,
    'SOFT' 70;
  color: var(--fg);
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-5);
}

/* Tabular numerals for stats / dashboard */
.t-stat {
  font-family: var(--font-display);
  font-size: var(--fs-44);
  line-height: var(--lh-tight);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'lnum';
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
}

.t-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Drop-cap for blog opener */
.t-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: 0.9;
  float: left;
  padding: 6px 12px 0 0;
  font-weight: 400;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 30;
  color: var(--color-gold);
}

/* Code / mono */
code,
.t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-paper);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--color-aubergine-deep);
}

/* Links */
a {
  color: var(--color-aubergine);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}
a:hover {
  text-decoration-thickness: 2px;
}

/* Focus — diskret guld ring */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold-focus);
  border-radius: var(--radius-sm);
}

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