/* =============================================================
   thomascilius.dk — Design tokens
   Editorial Danish business consultancy aesthetic
   ============================================================= */

/* ---------- Webfonts (Google Fonts substitution; flag to user) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Color system ---------- */

  /* Ink scale (deep neutrals — primary text & dark surfaces) */
  --ink-900: #0F1418;   /* near-black, primary on light */
  --ink-800: #1A2128;
  --ink-700: #2A323B;
  --ink-600: #3C4651;
  --ink-500: #4A5560;   /* slate — secondary text */
  --ink-400: #6E7884;
  --ink-300: #9CA3AD;
  --ink-200: #C7CCD2;
  --ink-100: #E2E5E9;

  /* Paper scale (warm cream — body & light surfaces) */
  --paper-50:  #FBF8F2;  /* lightest tint */
  --paper-100: #F4EFE7;  /* default body bg */
  --paper-200: #E8E1D4;  /* subtle surface — bone */
  --paper-300: #D8CFBE;
  --paper-400: #C9BFA8;  /* sand — muted neutral */
  --paper-500: #B0A589;

  /* Clay — primary accent (warm, confident) */
  --clay-50:  #FAEEE6;
  --clay-100: #F2D5C2;
  --clay-200: #E5AE8A;
  --clay-300: #D2855A;
  --clay-400: #C26B36;
  --clay-500: #B8552E;   /* brand accent */
  --clay-600: #9C4525;
  --clay-700: #7A341B;

  /* Moss — secondary editorial accent (sober, considered) */
  --moss-100: #DDE3D2;
  --moss-300: #8A9778;
  --moss-500: #4A5A3E;
  --moss-700: #2F3D27;

  /* Signal — highlights, amber for callouts */
  --signal-100: #F5E6C0;
  --signal-300: #DDB66A;
  --signal-500: #C49A4A;
  --signal-700: #876733;

  /* Status (used sparingly — newsletter form, etc.) */
  --success-500: #4A6E3F;
  --warning-500: #B8763E;
  --danger-500:  #A8392E;

  /* ---------- Semantic surface roles ---------- */
  --bg-page:      var(--paper-100);
  --bg-surface:   var(--paper-50);
  --bg-raised:    #FFFFFF;
  --bg-sunken:    var(--paper-200);
  --bg-inverse:   var(--ink-900);
  --bg-accent:    var(--clay-500);

  /* ---------- Semantic text roles ---------- */
  --fg-1:         var(--ink-900);   /* primary */
  --fg-2:         var(--ink-500);   /* secondary */
  --fg-3:         var(--ink-400);   /* tertiary / meta */
  --fg-mute:      var(--ink-300);
  --fg-on-dark:   var(--paper-100);
  --fg-on-dark-2: var(--paper-400);
  --fg-on-accent: var(--paper-50);
  --fg-link:      var(--clay-500);
  --fg-link-hover:var(--clay-700);

  /* ---------- Borders / rules ---------- */
  --border-subtle:  rgba(15, 20, 24, 0.08);
  --border-default: rgba(15, 20, 24, 0.16);
  --border-strong:  rgba(15, 20, 24, 0.32);
  --border-on-dark: rgba(244, 239, 231, 0.14);
  --rule-hairline:  1px solid var(--border-subtle);

  /* ---------- Type families ---------- */
  --font-serif:   'Newsreader', 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Manrope', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Type scale (modular, editorial) ---------- */
  --fs-12: 0.75rem;     /* 12 — micro, eyebrow */
  --fs-13: 0.8125rem;   /* 13 — meta */
  --fs-14: 0.875rem;    /* 14 — caption */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body large */
  --fs-20: 1.25rem;     /* 20 — lead */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-30: 1.875rem;    /* 30 — h3 */
  --fs-38: 2.375rem;    /* 38 — h2 */
  --fs-48: 3rem;        /* 48 — h1 */
  --fs-64: 4rem;        /* 64 — display */
  --fs-80: 5rem;        /* 80 — hero */

  /* line-height */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  /* tracking */
  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-eyebrow: 0.14em;
  --tr-caps:    0.08em;

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

  /* ---------- Spacing (4px base) ---------- */
  --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;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ---------- Shadows (editorial, restrained) ---------- */
  --sh-1: 0 1px 2px rgba(15, 20, 24, 0.04), 0 1px 1px rgba(15, 20, 24, 0.03);
  --sh-2: 0 2px 6px rgba(15, 20, 24, 0.06), 0 1px 2px rgba(15, 20, 24, 0.04);
  --sh-3: 0 8px 20px rgba(15, 20, 24, 0.08), 0 2px 6px rgba(15, 20, 24, 0.05);
  --sh-4: 0 18px 40px rgba(15, 20, 24, 0.10), 0 4px 12px rgba(15, 20, 24, 0.06);
  --sh-inset: inset 0 0 0 1px rgba(15, 20, 24, 0.06);

  /* ---------- Layout ---------- */
  --container-narrow: 720px;   /* article body */
  --container-default: 1080px; /* default content */
  --container-wide: 1280px;    /* hero rows */
  --container-max: 1440px;     /* max */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.18, 0.7, 0.16, 1);
  --t-fast:    140ms;
  --t-base:    220ms;
  --t-slow:    400ms;

  /* ---------- Z-index ---------- */
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
}

/* =============================================================
   Semantic typography utilities
   ============================================================= */

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--clay-500);
  line-height: var(--lh-snug);
}

.h-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(2.5rem, 5.6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.h-1, h1.editorial {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 4vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.h-2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.h-3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h-4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.code, code.token {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-200);
  padding: 0.12em 0.4em;
  border-radius: var(--r-sm);
  color: var(--ink-800);
}

.editorial-quote {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--fs-30);
  line-height: 1.3;
  color: var(--fg-1);
  border-left: 2px solid var(--clay-500);
  padding-left: var(--sp-6);
}

/* Editorial section number — used in articles "1.", "2.1" etc. */
.section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0.05em;
  color: var(--clay-500);
  font-weight: var(--fw-medium);
}

/* Light a small list of selection styles */
::selection { background: var(--clay-100); color: var(--ink-900); }