/* Tallinn Design System — bundled global stylesheet */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Tallinn — Fonts
   Brand typeface: Darker Grotesque (single family, all weights)
   NOTE: Served from Google Fonts CDN. We could not bundle the
   binaries locally in this environment — if you want fully
   offline/self-hosted woff2 files, share them and we'll swap
   these @import lines for local @font-face rules.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800;900&display=swap');

/* Display serifs — editorial headline + wordmark faces. Switchable via the
   --font-serif token (see typography.css). Italics included for emphasis. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ---- Blog / editorial system (used across the Tallinn blog) ----
   Newsreader — light editorial serif for titles, subtitles, pull-quotes
   (NYT "Cheltenham"-style column feel). Inter — clean sans for the
   eyebrow, byline, writer credit and UI labels. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   Tallinn — Color Tokens
   Brand kit: warm editorial palette
   ink #141413 · clay #D97757 · cream surfaces · warm neutrals
   ============================================================ */
:root {
  /* ---- Clay (primary accent — warm terracotta) ----
     CTAs, the signature dot, accent rules, focus rings.
     --clay-700 is the text-safe deep clay; --clay-500 is the brand accent. */
  --clay-700: #A84F30; /* text-safe deep clay */
  --clay-600: #C4623D;
  --clay-500: #D97757; /* BRAND ACCENT */
  --clay-400: #E2906F;
  --clay-300: #ECAE94;
  --clay-200: #F3CBB9;
  --clay-100: #F8E4DA; /* faint tint / wash */

  /* ---- Ink (warm near-black + warm greys) ---- */
  --ink-900: #141413; /* BRAND PRIMARY — headlines & primary text */
  --ink-700: #46443E; /* strong body */
  --ink-600: #5E5755; /* secondary text */
  --ink-400: #8A8178; /* tertiary / captions */
  --ink-300: #B4ACAA; /* muted text on dark surfaces */

  /* ---- Surfaces (warm neutrals) ---- */
  --white:   #FFFFFF;
  --paper:   #F6F4F1; /* warm card surface */
  --cream:   #F9F3EA; /* warm section wash */
  --sand:    #EDEBE6; /* alternating section background */
  --bg:      #FAF9F6; /* default warm page background */

  /* ---- Lines ---- */
  --line:        #E5E1DA; /* hairline borders */
  --line-strong: #D6D0C6; /* stronger borders / inputs */

  /* ============================================================
     Semantic aliases — use these in components
     ============================================================ */
  --color-bg: var(--bg);
  --color-surface: var(--white);
  --color-surface-sunken: var(--paper);
  --color-surface-warm: var(--cream);             /* warm section background */
  --color-surface-invert: var(--ink-900);
  --color-surface-deep: var(--clay-500);          /* clay full-bleed editorial band */
  --color-ink-on-deep: var(--white);              /* text on the clay band */

  --color-ink: var(--ink-900);          /* primary text */
  --color-ink-soft: var(--ink-600);     /* secondary text */
  --color-ink-muted: var(--ink-400);    /* tertiary / captions */
  --color-ink-invert: var(--paper);     /* text on dark surfaces */
  --color-ink-invert-soft: var(--ink-300); /* secondary text on dark */

  --color-accent: var(--clay-500);
  --color-accent-hover: var(--clay-600);
  --color-accent-press: var(--clay-700);
  --color-accent-ink: var(--white);     /* text on clay */
  --color-accent-tint: var(--clay-100);
  --color-accent-glow: rgba(217, 119, 87, 0.16); /* translucent accent — icon halos */

  /* warm tint set — clay-based highlight washes (used by .t-mark etc.) */
  --color-warm: var(--clay-400);
  --color-warm-soft: var(--clay-200);   /* highlight wash */
  --color-warm-ink: var(--clay-700);    /* text-safe clay */
  --color-warm-tint: var(--clay-100);   /* faint wash */

  --color-primary: var(--ink-900);
  --color-primary-hover: #2A2826;
  --color-primary-press: #000000;
  --color-primary-ink: var(--paper);    /* text on ink buttons */

  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --color-border-invert: rgba(255, 255, 255, 0.16);
  --color-focus: var(--clay-500);

  /* feedback */
  --color-success: #1C8C6A;
  --color-danger: #C5453B;
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Tallinn — Typography Tokens
   Darker Grotesque is a tall, slightly condensed grotesque.
   It is gorgeous at large display sizes (700–900, tight
   tracking). For body we lean on weight 500 + a touch more
   size & spacing so it reads comfortably.
   ============================================================ */
:root {
  --font-display: 'Darker Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Darker Grotesque', system-ui, -apple-system, sans-serif;
  /* Editorial serif for big headlines + the Tallinn wordmark. */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* weights */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */
  --fw-extrabold: 800;/* @kind font */
  --fw-black: 900;    /* @kind font */

  /* ---- Display scale (headlines, hero) ---- */
  --text-display-2xl: 7.5rem;  /* 120px */
  --text-display-xl: 5.5rem;   /* 88px  */
  --text-display-lg: 4rem;     /* 64px  */
  --text-display-md: 2.75rem;  /* 44px  */
  --text-display-sm: 2.25rem;  /* 36px  */

  /* ---- Text scale ---- */
  --text-xl: 1.75rem;   /* 28px lead paragraph */
  --text-lg: 1.4rem;    /* 22px */
  --text-base: 1.1875rem; /* 19px body (Darker Grotesque reads small) */
  --text-sm: 1rem;      /* 16px */
  --text-xs: 0.875rem;  /* 14px */

  /* eyebrow / label */
  --text-eyebrow: 1rem; /* 16px, uppercase, tracked */

  /* ---- Line heights ---- */
  --leading-tight: 0.95;   /* @kind font */
  --leading-snug: 1.08;    /* @kind font */
  --leading-display: 1.0;  /* @kind font */
  --leading-body: 1.5;     /* @kind font */
  --leading-relaxed: 1.6;  /* @kind font */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.03em; /* @kind font */
  --tracking-tight: -0.015em;  /* @kind font */
  --tracking-normal: 0em;      /* @kind font */
  --tracking-eyebrow: 0.18em;  /* @kind font */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Tallinn — Spacing, Radii, Shadows, Layout
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* section rhythm — top and bottom equal so every section has matching breathing room */
  --section-y: clamp(2.5rem, 4vw, 3.5rem); /* @kind spacing */
  /* reduced top so section headers sit higher */
  --section-y-top: clamp(2.5rem, 4vw, 3.5rem); /* @kind spacing */
  --container: 100%;                    /* @kind spacing */
  --container-narrow: 760px;            /* @kind spacing */
  --gutter: max(2.8cm, 5.5vw);/* @kind spacing */

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-strong: 1.5px solid var(--color-border-strong);

  /* ---- Shadows ---- (cool navy-tinted, soft) ---- */
  --shadow-xs: 0 1px 2px rgba(12, 32, 109, 0.06);
  --shadow-sm: 0 2px 8px rgba(12, 32, 109, 0.07);
  --shadow-md: 0 8px 24px rgba(12, 32, 109, 0.09);
  --shadow-lg: 0 18px 48px rgba(12, 32, 109, 0.12);
  --shadow-accent: 0 8px 22px rgba(12, 32, 109, 0.14);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);/* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Tallinn — Base element styles & a few brand utilities
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}

/* Display headlines wear the editorial serif; h3/h4 stay grotesque for UI clarity. */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--clay-200); color: var(--ink-900); }

:focus-visible {
  outline: 2.5px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Brand utilities ---- */
.t-eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* the signature period. Inherits the surrounding text color — only the
   Tallinn wordmark dot (set inline in Logo) stays the brand accent. */
.t-dot { color: inherit; }

/* gold highlighter mark — warms key words in headlines.
   Sits behind text as a soft wash; safe over navy & ink type. */
.t-mark {
  background-image: linear-gradient(transparent 16%, var(--color-warm-soft) 16%, var(--color-warm-soft) 100%);
  padding-inline: 0.04em;
}

.t-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.t-container--narrow { max-width: var(--container-narrow); }

.t-section { padding-top: var(--section-y-top); padding-bottom: var(--section-y); }