/* ==========================================================================
   Кузня Свят — Colors & Type tokens
   Premium private event space — Київ
   Two modes: KIDS (warm paper, terracotta) and ADULT (cinema black, brass)
   ========================================================================== */

/* ---- Webfonts -------------------------------------------------------------
   Body:    Plus Jakarta Sans   (300, 400, 500, 600, 700)
   Display: Instrument Serif    (400, 400 italic)
   Mono:    JetBrains Mono      (500) — technical tags only
---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* ----- Type families ------------------------------------------------- */
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ----- Type scale (role tokens — DESIGN.md §4) ----------------------- */
  /* DESIGN.md updates Display + H1–H3 to Instrument Serif and adjusts sizes. */
  --type-display-xl-size:   clamp(4.8rem, 8vw, 8rem);
  --type-display-xl-line:   0.92;
  --type-display-l-size:    clamp(3.8rem, 6vw, 6rem);
  --type-display-l-line:    0.96;

  --type-h1-size:           clamp(3rem, 5vw, 4.8rem);
  --type-h1-weight:         400;
  --type-h1-line:           1.0;
  --type-h1-track:          0;

  --type-h2-size:           clamp(2.2rem, 3.6vw, 3.8rem);
  --type-h2-weight:         400;
  --type-h2-line:           1.02;
  --type-h2-track:          0;

  --type-h3-size:           clamp(1.7rem, 2.3vw, 2.4rem);
  --type-h3-weight:         400;
  --type-h3-line:           1.08;

  --type-h4-size:           1.125rem;
  --type-h4-weight:         700;
  --type-h4-line:           1.25;

  --type-quote-size:        clamp(1.4rem, 2vw, 2rem);
  --type-quote-line:        1.15;

  --type-body-lead-size:    1.125rem;
  --type-body-size:         1rem;
  --type-body-small-size:   0.9375rem;
  --type-body-tabular-size: 1rem;
  --type-body-tabular-weight: 500;

  --type-caption-size:      0.875rem;
  --type-caption-bold-weight: 700;
  --type-caption-bold-track: 0.04em;

  --type-adult-kicker-size: 0.95rem;
  --type-adult-kicker-track: 0.04em;

  --type-button-size:       1rem;
  --type-button-weight:     700;
  --type-button-small-size: 0.8125rem;
  --type-button-small-track: 0.02em;

  --type-mono-tag-size:     0.75rem;
  --type-mono-tag-weight:   500;
  --type-mono-tag-track:    0.06em;

  /* ----- Spacing scale (4px base) -------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Optical-adjustment (use sparingly) */
  --space-opt-7:  7px;
  --space-opt-11: 11px;
  --space-opt-15: 15px;
  --space-opt-19: 19px;
  --space-opt-22: 22px;

  /* ----- Layout tokens ------------------------------------------------- */
  --pad-card:              24px;
  --pad-card-mobile:       20px;
  --pad-card-dense:        16px;
  --pad-section-y:         clamp(56px, 8vw, 128px);
  --pad-section-y-compact: clamp(40px, 6vw, 80px);
  --pad-section-x:         clamp(20px, 5vw, 48px);
  --gutter-mobile:  24px;
  --gutter-tablet:  32px;
  --gutter-desktop: 48px;
  --gap-inline: 8px;
  --gap-tight:  12px;
  --gap-loose:  24px;
  --gap-list:   16px;
  --gap-hero:   32px;
  --gap-stack:  12px;
  --content-max: 1200px;

  /* ----- Radius -------------------------------------------------------- */
  --radius-button:  6px;     /* adult buttons */
  --radius-pill:    9999px;  /* kids buttons, all tag chips */
  --radius-circle:  50%;     /* icon buttons */
  --radius-card:    8px;     /* default card radius */
  --radius-lg:      12px;    /* AGENTS.md hard cap (except kids pill CTAs) */
}

/* Asymmetric grid utilities (DESIGN.md §7) — no equal thirds. */
.asymmetric-3      { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gutter-desktop); }
.asymmetric-3-alt  { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--gutter-desktop); }
@media (max-width: 1023px) {
  .asymmetric-3, .asymmetric-3-alt { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 639px) {
  .asymmetric-3, .asymmetric-3-alt { grid-template-columns: 1fr; }
}

/* DESIGN.md: no negative letter-spacing anywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   KIDS MODE — warm paper, terracotta
   Apply via :root[data-mode="kids"] OR .kids-mode wrapper
   ========================================================================== */
:root,
:root[data-mode="kids"],
.kids-mode {
  /* Surfaces / luminance steps (DESIGN.md §3) */
  --paper:           #f4efe7;  /* canvas */
  --paper-soft:      #fbf7f1;  /* soft bands */
  --paper-warm:      #eadfce;  /* warm panels */
  --surface-raised:  #fffaf3;  /* cards */
  --surface-overlay: #faf3e9;  /* nav/modals (use with 0.86 alpha) */
  --surface-card:    #ffffff;  /* featured cards */

  /* Ink scale */
  --ink:       #191615;
  --ink-soft:  #4c4540;
  --subtle:    #756d67;        /* metadata */
  --faint:     #aaa199;        /* disabled only */

  /* Accent — terracotta */
  --accent:        #a0583d;
  --accent-soft:   #c78063;
  --accent-on:     #fbf7f1;
  --accent-glow:   rgba(160, 88, 61, 0.14);

  /* Terracotta tints (state ramps) */
  --terracotta-200: #e4b49e;
  --terracotta-500: #a0583d;
  --terracotta-700: #874730;   /* active */
  --terracotta-900: #673421;   /* pressed */

  /* State */
  --state-success: #4f8a5b;
  --state-warn:    #bd7a32;
  --state-error:   #b84c3a;
  --state-info:    #527487;

  /* Borders / dividers (DESIGN.md tokens: hairline / hairline-strong / divider) */
  --border-subtle:        rgba(25, 22, 21, 0.06);
  --border-standard:      rgba(25, 22, 21, 0.10);
  --border-strong:        rgba(25, 22, 21, 0.16);
  --border-accent-soft:   rgba(160, 88, 61, 0.35);
  --border-accent-strong: rgba(160, 88, 61, 0.85);
  --hairline:             rgba(25, 22, 21, 0.12);
  --hairline-strong:      rgba(25, 22, 21, 0.22);
  --divider:              rgba(25, 22, 21, 0.08);
  --rule-tint:            #eadfce;

  /* Elevation — kids: max ONE shadow per element */
  --shadow-card:   0 18px 56px rgba(33, 25, 21, 0.10);
  --shadow-lifted: 0 24px 72px rgba(33, 25, 21, 0.14);
  --shadow-modal:  0 32px 96px rgba(33, 25, 21, 0.18);
  --shadow-none:   none;

  /* Input fills */
  --input-bg:        #ffffff;
  --input-bg-focus:  #ffffff;
  --input-bg-error:  #fff4f1;
  --input-bg-disabled: #faf6ee;
}

/* ==========================================================================
   ADULT MODE — cinema black, muted brass
   Apply via :root[data-mode="adult"] OR .adult-mode wrapper
   ========================================================================== */
:root[data-mode="adult"],
.adult-mode {
  /* Surfaces / luminance steps (DESIGN.md §3) */
  --paper:           #0b0908;  /* canvas */
  --paper-soft:      #14100d;  /* quiet bands */
  --paper-warm:      #1d1814;  /* raised surfaces */
  --surface-1:       #14100d;  /* alias for paper-soft (compat) */
  --surface-2:       #1d1814;  /* alias for paper-warm */
  --surface-raised:  #251f1a;  /* selected cards */
  --surface-overlay: #14100d;  /* nav/modals (use with 0.92 alpha) */

  /* Ink scale */
  --ink:       #f5efe7;
  --ink-soft:  #b8aea3;
  --muted:     #b8aea3;
  --subtle:    #93887d;        /* metadata */
  --faint:     #675f57;        /* disabled only */

  /* Accent — muted brass */
  --accent:        #b9914b;
  --accent-soft:   #d6bd82;
  --accent-on:     #0b0908;
  --accent-glow:   rgba(185, 145, 75, 0.14);

  /* Brass tints (state ramps) */
  --brass-200: #e6d09a;
  --brass-500: #b9914b;
  --brass-700: #9a7639;         /* active */
  --brass-900: #735728;         /* pressed */

  /* State */
  --state-success: #8fbd77;
  --state-warn:    #d2a15a;
  --state-error:   #d06b56;
  --state-info:    #9bb4c0;

  /* Borders / dividers (DESIGN.md: brass-tinted hairlines) */
  --border-subtle:        rgba(245, 239, 231, 0.05);
  --border-standard:      rgba(245, 239, 231, 0.08);
  --border-strong:        rgba(245, 239, 231, 0.12);
  --border-accent-soft:   rgba(185, 145, 75, 0.40);
  --border-accent-strong: rgba(185, 145, 75, 0.85);
  --hairline:             rgba(185, 145, 75, 0.26);
  --hairline-strong:      rgba(214, 189, 130, 0.44);
  --divider:              rgba(245, 239, 231, 0.10);
  --rule-tint:            #14100d;

  /* Elevation — adult: ZERO shadows. Use luminance steps. */
  --elev-1: rgba(245, 239, 231, 0.02);
  --elev-3: rgba(245, 239, 231, 0.04);
  --elev-4: rgba(245, 239, 231, 0.05);
  --shadow-card:   none;
  --shadow-lifted: none;
  --shadow-modal:  none;
  --shadow-none:   none;

  /* Input fills */
  --input-bg:          rgba(245, 239, 231, 0.02);
  --input-bg-focus:    rgba(245, 239, 231, 0.04);
  --input-bg-error:    rgba(208, 107, 86, 0.06);
  --input-bg-disabled: rgba(245, 239, 231, 0.01);
}

/* ==========================================================================
   Semantic typography roles (selectors)
   Use these on real elements OR copy declarations into your component CSS.
   ========================================================================== */

html, body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  font-weight: 400;
  line-height: var(--type-display-xl-line);
  letter-spacing: 0;
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  font-weight: 400;
  line-height: var(--type-display-l-line);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: 400;
  line-height: var(--type-h2-line);
}

/* DESIGN.md: H1–H3 are Instrument Serif (display family). H4 stays sans. */
.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-weight: 400;
  line-height: var(--type-h1-line);
  letter-spacing: 0;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: 400;
  line-height: var(--type-h2-line);
}
.t-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: 400;
  line-height: var(--type-h3-line);
}
.t-h4, h4 {
  font-family: var(--font-body);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-line);
}
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-quote-size);
  font-weight: 400;
  line-height: var(--type-quote-line);
}

.t-body-lead {
  font-family: var(--font-body);
  font-size: var(--type-body-lead-size);
  font-weight: 400;
  line-height: 1.55;
}
.t-body, p {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: 1.6;
}
.t-body-small {
  font-family: var(--font-body);
  font-size: var(--type-body-small-size);
  font-weight: 400;
  line-height: 1.55;
}
.t-body-tabular {
  font-family: var(--font-body);
  font-size: var(--type-body-tabular-size);
  font-weight: var(--type-body-tabular-weight);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: 400;
  line-height: 1.5;
}
.t-caption-bold {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-bold-weight);
  line-height: 1.4;
  letter-spacing: var(--type-caption-bold-track);
  text-transform: uppercase;
}

.t-adult-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-adult-kicker-size);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--type-adult-kicker-track);
}

.t-button {
  font-family: var(--font-body);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: 1;
}
.t-button-small {
  font-family: var(--font-body);
  font-size: var(--type-button-small-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--type-button-small-track);
}

.t-mono-tag {
  font-family: var(--font-mono);
  font-size: var(--type-mono-tag-size);
  font-weight: var(--type-mono-tag-weight);
  line-height: 1.2;
  letter-spacing: var(--type-mono-tag-track);
  text-transform: uppercase;
}

/* Focus ring — single consistent treatment across both modes */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}