/* ============================================================
   Kate — Kateryna Hutenieva
   Editorial AI art direction practice
   ----------------------------------------------------------------
   Two-tone editorial system: every composition is one light + one
   dark from the paired palette. Never tone-on-tone, never mid-tones.
   ============================================================ */

/* ─── Fonts via Google Fonts (matches brand brief: Bakbak One,
   Albert Sans, Whisper — all hosted on fonts.googleapis.com) ───── */
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Bakbak+One&family=Whisper&display=swap");

:root {
  /* ─── Neutral spine ─────────────────────────────────────────── */
  --baige: #FFF6EF;          /* warm off-white */
  --chocolate: #220909;      /* deep brown-black */

  /* ─── Colourful pairs ───────────────────────────────────────── */
  --pink: #FE8AEB;           /* pressed bubblegum */
  --cherry: #71140C;         /* oxblood */

  --sky: #B0CFF7;            /* pale daylight blue */
  --blue: #151D47;           /* midnight navy */

  --butter: #FFF9BE;         /* pale desaturated cream-yellow */
  --forest: #073027;         /* forest-black */

  /* ─── Light family (only used on a dark field) ─────────────── */
  --light-baige: var(--baige);
  --light-pink: var(--pink);
  --light-sky: var(--sky);
  --light-butter: var(--butter);

  /* ─── Dark family (only used on a light field) ─────────────── */
  --dark-chocolate: var(--chocolate);
  --dark-cherry: var(--cherry);
  --dark-blue: var(--blue);
  --dark-forest: var(--forest);

  /* ─── Default project pairing ───────────────────────────────── */
  /* Pink on Chocolate is the dominant pairing across the site.    */
  --bg: var(--chocolate);
  --fg: var(--pink);
  --bg-secondary: var(--baige);  /* used only for inverted sections */
  --fg-secondary: var(--chocolate);

  /* ─── Type families ─────────────────────────────────────────── */
  /* Display / headers — heavy, condensed, blunt. */
  --font-display: "Bakbak One", "Arial Black", sans-serif;
  /* Body / structural — clean, neutral. */
  --font-body: "Albert Sans", "Inter", "Helvetica Neue", system-ui, sans-serif;
  /* Decorative break — one expressive moment per composition. */
  --font-script: "Whisper", "Apple Chancery", cursive;

  /* ─── Type scale (display) — deliberate jumps, no timid mids ── */
  --type-hero: clamp(72px, 12vw, 200px);
  --type-display: clamp(56px, 8vw, 128px);
  --type-section: clamp(40px, 5vw, 72px);
  --type-poster: clamp(32px, 4vw, 56px);

  /* ─── Type scale (body) ─────────────────────────────────────── */
  --type-lead: 22px;
  --type-body: 17px;
  --type-meta: 14px;
  --type-micro: 12px;

  /* ─── Type scale (script) ───────────────────────────────────── */
  --type-script-lg: clamp(48px, 6vw, 96px);
  --type-script-md: 36px;
  --type-script-sm: 24px;

  /* ─── Line heights ──────────────────────────────────────────── */
  --lh-display: 0.92;
  --lh-tight: 1.05;
  --lh-body: 1.45;
  --lh-loose: 1.6;

  /* ─── Letter-spacing (sparing) ──────────────────────────────── */
  --tracking-display: -0.01em;
  --tracking-body: 0;
  --tracking-meta: 0.02em;

  /* ─── Spacing — editorial, generous ─────────────────────────── */
  --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: 192px;

  /* ─── Radii — small only. Brand is editorial-pressed. ───────── */
  --radius-0: 0;
  --radius-input: 2px;
  --radius-small-ui: 4px;
  --radius-pill: 999px;       /* used for chip/lozenge labels only */
  --radius-card: 16px;        /* mirrors Figma swatch radius */

  /* ─── Borders ───────────────────────────────────────────────── */
  --border-hairline: 1px solid currentColor;
  --border-rule: 2px solid currentColor;
  --border-emphasis: 4px solid currentColor;

  /* ─── Texture references — set on dark fields ───────────────── */
  --paper-grain-opacity: 0.05;
}

/* ============================================================
   Pair scopes
   Apply one of these classes to any container to swap the
   working light/dark pair. Always one --bg and one --fg.
   ============================================================ */
.pair-pink-chocolate    { --bg: var(--chocolate); --fg: var(--pink); }
.pair-chocolate-pink    { --bg: var(--pink);      --fg: var(--chocolate); }
.pair-baige-chocolate   { --bg: var(--chocolate); --fg: var(--baige); }
.pair-chocolate-baige   { --bg: var(--baige);     --fg: var(--chocolate); }
.pair-sky-blue          { --bg: var(--blue);      --fg: var(--sky); }
.pair-blue-sky          { --bg: var(--sky);       --fg: var(--blue); }
.pair-butter-forest     { --bg: var(--forest);    --fg: var(--butter); }
.pair-forest-butter     { --bg: var(--butter);    --fg: var(--forest); }
.pair-pink-cherry       { --bg: var(--cherry);    --fg: var(--pink); }
.pair-cherry-pink       { --bg: var(--pink);      --fg: var(--cherry); }

/* Cross-pair combos (legal — rule is light + dark, not pair-internal) */
.pair-pink-forest       { --bg: var(--forest);    --fg: var(--pink); }
.pair-sky-cherry        { --bg: var(--cherry);    --fg: var(--sky); }
.pair-butter-blue       { --bg: var(--blue);      --fg: var(--butter); }
.pair-sky-chocolate     { --bg: var(--chocolate); --fg: var(--sky); }
.pair-butter-chocolate  { --bg: var(--chocolate); --fg: var(--butter); }
.pair-pink-blue         { --bg: var(--blue);      --fg: var(--pink); }

/* ============================================================
   Semantic type roles
   Use these classes (or apply the variables manually) on text.
   Roles never swap — Bakbak One owns display, Albert Sans owns
   body, Whisper is the one expressive break.
   ============================================================ */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  font-weight: 400;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}
.t-section {
  font-family: var(--font-display);
  font-size: var(--type-section);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}
.t-poster {
  font-family: var(--font-display);
  font-size: var(--type-poster);
  line-height: var(--lh-tight);
  font-weight: 400;
}
.t-lead {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: var(--lh-body);
  font-weight: 400;
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 400;
}
.t-body-bold {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 600;
}
.t-meta {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking-meta);
  font-weight: 500;
}
.t-micro {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-loose);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* The single expressive break. Use once per composition. */
.t-script-lg {
  font-family: var(--font-script);
  font-size: var(--type-script-lg);
  line-height: 1;
  font-weight: 400;
}
.t-script-md {
  font-family: var(--font-script);
  font-size: var(--type-script-md);
  line-height: 1;
  font-weight: 400;
}
.t-script-sm {
  font-family: var(--font-script);
  font-size: var(--type-script-sm);
  line-height: 1.1;
  font-weight: 400;
}

/* ============================================================
   Base resets (lightweight — design system only)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }