/* ============================================================
   Cawi Media — Colors & Typography
   Minimal, luxury, German-formal. White canvas, black ink, one blue.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── Color: Core ───────────────────────────────────────── */
  --color-canvas:        #ffffff;   /* primary background */
  --color-canvas-warm:   #fafaf9;   /* off-white section bg */
  --color-canvas-gray:   #f4f4f3;   /* subtle gray section */
  --color-ink:           #111111;   /* primary text / near-black */
  --color-ink-soft:      #2a2a2a;   /* secondary text */
  --color-ink-muted:     #6b6b6b;   /* tertiary / captions */
  --color-ink-faint:     #a3a3a3;   /* disabled / quiet */
  --color-hairline:      #e8e8e6;   /* dividers, faint borders */
  --color-hairline-strong: #d4d4d2;

  /* ── Color: Accent (the ONLY chromatic) ────────────────── */
  --color-accent:        #1554A8;   /* Cawi deep blue */
  --color-accent-hover:  #0f4489;
  --color-accent-press:  #0b3770;
  --color-accent-tint:   #eaf0f9;   /* 6% mix into white for backgrounds */

  /* ── Color: Status (use very sparingly) ────────────────── */
  --color-positive:      #1a6b3f;
  --color-warn:          #8a5a00;
  --color-negative:      #9a2323;

  /* ── Semantic aliases (use these in components) ────────── */
  --fg-1: var(--color-ink);         /* strongest text */
  --fg-2: var(--color-ink-soft);    /* body */
  --fg-3: var(--color-ink-muted);   /* captions, meta */
  --fg-4: var(--color-ink-faint);
  --fg-accent: var(--color-accent);
  --fg-on-accent: #ffffff;
  --bg-1: var(--color-canvas);
  --bg-2: var(--color-canvas-warm);
  --bg-3: var(--color-canvas-gray);
  --bg-inverse: var(--color-ink);
  --fg-on-inverse: #ffffff;
  --border-hairline: var(--color-hairline);
  --border-strong: var(--color-hairline-strong);

  /* ── Type: Families ────────────────────────────────────── */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ── Type: Scale (modular, German-friendly: numbers accommodate longer words) ── */
  --fs-display-xl: clamp(56px, 7vw, 104px);   /* hero headline */
  --fs-display-l:  clamp(44px, 5.2vw, 76px);
  --fs-display-m:  clamp(36px, 4vw, 56px);
  --fs-h1:         clamp(32px, 3.4vw, 48px);
  --fs-h2:         clamp(26px, 2.6vw, 36px);
  --fs-h3:         20px;
  --fs-lead:       20px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-label:      12px;   /* eyebrow / all-caps labels */
  --fs-mono:       13px;

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

  /* ── Type: Line heights ────────────────────────────────── */
  --lh-tight: 1.02;    /* display */
  --lh-snug: 1.12;     /* headings */
  --lh-normal: 1.45;   /* body */
  --lh-relaxed: 1.6;   /* long-form body */

  /* ── Type: Tracking ────────────────────────────────────── */
  --tr-display: -0.02em;   /* slight negative on big type */
  --tr-heading: -0.015em;
  --tr-body:   -0.005em;
  --tr-label:   0.14em;    /* ALL-CAPS eyebrows get generous tracking */

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* ── Radii ─────────────────────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 999px;

  /* ── Shadows — very restrained ─────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.04);
  --shadow-sm: 0 1px 3px rgba(17,17,17,0.06), 0 1px 2px rgba(17,17,17,0.04);
  --shadow-md: 0 4px 16px rgba(17,17,17,0.06), 0 1px 3px rgba(17,17,17,0.05);
  --shadow-lg: 0 12px 40px rgba(17,17,17,0.08), 0 2px 6px rgba(17,17,17,0.04);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-hairline);

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

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-prose: 680px;
  --gutter: clamp(24px, 5vw, 64px);
}

/* ============================================================
   Base + element semantics
   ============================================================ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  color: var(--fg-1);
  background: var(--bg-1);
}

/* ── Display & Headings ─────────────────────────────────── */
.display-xl, .t-display-xl {
  font-family: var(--font-sans);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.display-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  color: var(--fg-1);
}
h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ── Body ────────────────────────────────────────────────── */
p, .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}
.t-small { font-size: var(--fs-small); color: var(--fg-3); }

/* ── Eyebrow / label ───────────────────────────────────── */
.t-label, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ── Mono / code ───────────────────────────────────────── */
code, .t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0;
}

/* ── Links ─────────────────────────────────────────────── */
a {
  color: var(--fg-1);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.6; }
.link-accent { color: var(--fg-accent); }
.link-accent:hover { opacity: 1; color: var(--color-accent-hover); }

/* ── Selection ─────────────────────────────────────────── */
::selection { background: var(--color-accent); color: #fff; }