/* Exoteak — design tokens (skompilowane z design systemu) */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700&display=swap");

/* ── tokens/colors.css ───────────────────────────── */
/* Exoteak color palette
   Inspired by raw teak heartwood, walnut, parchment and the warm shadows of a workshop.
   All values authored in oklch for perceptual consistency. */
:root {
  /* ── Base neutrals (warm parchment → espresso) ─────────────────── */
  --parchment-50:  oklch(98% 0.008 80);
  --parchment-100: oklch(96% 0.014 78);
  --parchment-200: oklch(92% 0.020 76);
  --parchment-300: oklch(86% 0.026 72);
  --parchment-400: oklch(74% 0.030 65);

  /* ── Wood tones (light sapwood → deep walnut) ──────────────────── */
  --wood-100: oklch(88% 0.040 70);  /* bleached oak */
  --wood-200: oklch(78% 0.060 60);  /* honey */
  --wood-300: oklch(66% 0.090 50);  /* teak */
  --wood-400: oklch(54% 0.095 45);  /* cognac */
  --wood-500: oklch(44% 0.080 40);  /* walnut */
  --wood-600: oklch(34% 0.055 38);  /* dark walnut */
  --wood-700: oklch(26% 0.038 38);  /* espresso */
  --wood-800: oklch(18% 0.025 40);  /* near-black bark */

  /* ── Accent (brushed brass / heartwood gold) ───────────────────── */
  --brass-300: oklch(82% 0.080 80);
  --brass-400: oklch(72% 0.110 78);
  --brass-500: oklch(62% 0.120 75);

  /* ── Semantic surfaces ─────────────────────────────────────────── */
  --bg-page:        var(--parchment-50);
  --bg-elevated:    #ffffff;
  --bg-sunken:      var(--parchment-100);
  --bg-inverse:     var(--wood-800);

  --surface-card:   #ffffff;
  --surface-quiet:  var(--parchment-100);
  --surface-warm:   oklch(94% 0.022 72);
  --surface-dark:   var(--wood-700);

  /* ── Semantic text ─────────────────────────────────────────────── */
  --text-strong:    var(--wood-800);
  --text-body:      var(--wood-700);
  --text-muted:     oklch(45% 0.025 45);
  --text-quiet:     oklch(58% 0.025 50);
  --text-on-dark:   var(--parchment-50);
  --text-on-dark-muted: oklch(78% 0.020 65);
  --text-accent:    var(--wood-500);
  --text-brass:     var(--brass-500);

  /* ── Borders & hairlines ───────────────────────────────────────── */
  --border-hair:    oklch(88% 0.018 70 / 1);
  --border-soft:    oklch(82% 0.025 65 / 1);
  --border-strong:  var(--wood-500);
  --border-on-dark: oklch(45% 0.030 45);

  /* ── Semantic intents ──────────────────────────────────────────── */
  --intent-primary: var(--wood-500);
  --intent-primary-hover: var(--wood-600);
  --intent-primary-press: var(--wood-700);

  --intent-accent: var(--brass-500);
  --intent-accent-hover: var(--brass-400);

  --intent-success: oklch(52% 0.080 145);
  --intent-warning: oklch(68% 0.130 70);
  --intent-danger:  oklch(50% 0.130 30);

  /* ── Focus ring ────────────────────────────────────────────────── */
  --ring-focus: oklch(62% 0.120 75 / 0.55);
}

/* ── tokens/typography.css ───────────────────────────── */
/* Typography tokens — serif for headlines, sans for body.
   Tracking is tightened on the display face and loosened on small caps eyebrows. */
:root {
  /* Families */
  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --font-body:    "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-light: 300;     /* @kind other */
  --fw-regular: 400;   /* @kind other */
  --fw-medium: 500;    /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold: 700;      /* @kind other */

  /* Type scale — modular ~1.250 / generous on display */
  --fs-overline:  0.72rem;   /* 11.5px — small-caps eyebrow */
  --fs-caption:   0.78rem;   /* 12.5px */
  --fs-body-sm:   0.875rem;  /* 14px   */
  --fs-body:      1rem;      /* 16px   */
  --fs-body-lg:   1.125rem;  /* 18px   */
  --fs-lede:      1.375rem;  /* 22px   */

  --fs-title-sm:  1.5rem;    /* 24px   */
  --fs-title:     2rem;      /* 32px   */
  --fs-title-lg:  2.75rem;   /* 44px   */
  --fs-display-sm: 3.5rem;   /* 56px   */
  --fs-display:   4.5rem;    /* 72px   */
  --fs-display-lg: 6rem;     /* 96px   */

  /* Line heights */
  --lh-tight:   1.05;   /* @kind other */
  --lh-snug:    1.2;    /* @kind other */
  --lh-normal:  1.5;    /* @kind other */
  --lh-relaxed: 1.65;   /* @kind other */

  /* Letter-spacing */
  --ls-display:  -0.015em;   /* @kind other */
  --ls-tight:    -0.01em;    /* @kind other */
  --ls-normal:   0em;        /* @kind other */
  --ls-wide:     0.04em;     /* @kind other */
  --ls-overline: 0.22em;     /* @kind other */
}

/* ── tokens/spacing.css ───────────────────────────── */
/* Spacing, radius, and shadow tokens.
   Spacing is a 4-px base scale with named t-shirt aliases.
   Radii stay restrained — this is a heritage brand, not a fintech app. */
:root {
  /* Spacing (4px base) */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;  /*  4 */
  --space-2:   0.5rem;   /*  8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */
  --space-40: 10rem;     /* 160 */

  /* Layout */
  --container-max: 1240px;   /* @kind spacing */
  --container-prose: 68ch;   /* @kind other */
  --gutter:        clamp(1rem, 4vw, 3rem);   /* @kind spacing */

  /* Radii — small, deliberate. Pills only for tags. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Borders */
  --border-thin: 1px;
  --border-med:  1.5px;
  --border-thick: 2px;

  /* Shadows — warm, low, no blueish casts */
  --shadow-xs: 0 1px 1px oklch(30% 0.05 45 / 0.06);
  --shadow-sm: 0 1px 2px oklch(30% 0.05 45 / 0.06),
               0 1px 1px oklch(30% 0.05 45 / 0.04);
  --shadow-md: 0 4px 12px oklch(28% 0.05 45 / 0.08),
               0 1px 2px oklch(28% 0.05 45 / 0.06);
  --shadow-lg: 0 12px 32px oklch(28% 0.05 45 / 0.12),
               0 2px 6px oklch(28% 0.05 45 / 0.08);
  --shadow-xl: 0 28px 60px oklch(25% 0.05 45 / 0.18);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-hair);
}

/* ── tokens/motion.css ───────────────────────────── */
/* Motion tokens — subtle, no bounce.
   The brand reads as quiet and crafted, so transitions are short and gentle. */
:root {
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);      /* @kind other */
  --ease-stand:  cubic-bezier(0.4, 0, 0.2, 1);        /* @kind other */

  --dur-xs: 120ms;   /* @kind other */
  --dur-sm: 180ms;   /* @kind other */
  --dur-md: 280ms;   /* @kind other */
  --dur-lg: 480ms;   /* @kind other */
  --dur-xl: 800ms;   /* @kind other */
}

/* ── tokens/base.css ───────────────────────────── */
/* Minimal global element styles — applied wherever this stylesheet is linked. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--dur-sm) var(--ease-out);
}
a:hover { color: var(--wood-600); text-decoration: underline; }

::selection {
  background: var(--brass-300);
  color: var(--wood-800);
}

:focus-visible {
  outline: 2px solid var(--ring-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

img, svg { display: block; max-width: 100%; }

/* Utility — small-caps eyebrow used across the brand */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}