/*
 * Fonts: 'Playfair Display' (serif) + 'Inter' (sans) — loaded via <link> in
 * quiz_cards.html head (ital,wght@0,400;0,500;0,600;1,400 for Playfair Display;
 * wght@400;500;600;700 for Inter). Do NOT add an @import here — it duplicates
 * the network request and the <link> tag already covers the italic axis.
 */

/*
 * Подарцев Design Tokens — Single Source of Truth
 * Plan 1 Task 1 — podartsev.ru palette reskin (2026-05-31)
 * (previously Sprint 5 Track B20 Critic 4 F8)
 *
 * Purpose: All visual decisions expressed as CSS custom properties so every
 * future surface (web cards, quiz UI, admin, email) can import this one file
 * and stay in visual register.
 *
 * Design rationale: Premium concierge brand — «personal advisor, not catalog».
 * Visual code mirrors the brand identity of podartsev.ru: navy + gold + Playfair
 * Display. Navy signals trust and authority; gold signals warmth and craft;
 * Playfair Display provides editorial serif gravitas for headings and hooks;
 * Inter provides clean legibility for body and UI labels.
 * Radii 2–4px: minimal rounding avoids «friendly-app» feel, stays editorial.
 *
 * WCAG 2.1 AA contrast verification is deferred to the a11y task (Task 6).
 * All interactive text pairs will be validated against AA ratios at that stage.
 */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
   * TYPOGRAPHY
   * ─────────────────────────────────────────────────────────────────────────
   *
   * Two families: Playfair Display (serif) for hooks, headings, brand wordmark;
   * Inter (sans) for all body copy and UI labels. Both loaded via Google Fonts
   * @import at the top of this file. System fallback chains cover offline.
   */

  /* purpose: serif family for gift_name (h2), hero title (h1), hook_line (em),
     and brand wordmark. Playfair Display chosen for: editorial authority,
     strong Cyrillic coverage, premium editorial brand register, 400/500/600
     weights available, free/open via Google Fonts. */
  --font-serif: 'Playfair Display', Georgia, "Times New Roman", serif;

  /* purpose: the warm, spoken register — the concierge line above wizard step 1.
     Aliases the brand serif rather than carrying its own family: the 2026-05-31
     site-identity override retired the earlier Lora/ivory design for
     Playfair/navy, so a second serif would reopen a split the override closed.
     Ratified by founder 2026-07-16 (until then the var was undefined and the
     line silently rendered in the Georgia fallback). */
  --font-warm: var(--font-serif);

  /* purpose: sans-serif for all body, labels, UI controls, buy_paths.
     Open Sans first — matches podartsev.ru body font exactly (brand бесшовность,
     confirmed via _brand_specs.json cta.ff 2026-06-07).
     System fallbacks cover Windows (Segoe UI), macOS/iOS (SF Pro Text),
     Android (Roboto), and a generic sans-serif safety net. */
  --font-sans: "Open Sans", "Segoe UI", "SF Pro Text", Roboto, Arial, sans-serif;

  /* purpose: monospace for debug/technical content (internal admin views only,
     never in user-facing cards). */
  --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* ── Fluid font sizes (clamp = min | preferred | max) ── */

  /* purpose: hero h1 title — kinship_title — large, commanding, serif */
  --fz-hero: clamp(1.5rem, 4vw, 2.5rem);

  /* purpose: gift_name (h2 inside card) — most prominent card element.
     22px mobile → 30px desktop. Playfair Display 500. */
  --fz-gift-name: clamp(1.375rem, 2.5vw + 0.5rem, 1.875rem);

  /* purpose: gift_name at very small screens (<360px). Hard floor 22px. */
  --fz-gift-name-small: 1.375rem;

  /* purpose: hook_line italic — secondary card accent */
  --fz-hook-line: clamp(0.875rem, 1.5vw + 0.1rem, 0.9375rem);

  /* purpose: why_them body prose */
  --fz-body: clamp(0.875rem, 1.2vw + 0.1rem, 1rem);

  /* purpose: slot_kind label — small-caps label at card top */
  --fz-slot-label: 0.6875rem;

  /* purpose: value_frame — centered muted caption */
  --fz-value-frame: 0.75rem;

  /* purpose: buy_paths text links and action button labels */
  --fz-action: 0.875rem;

  /* purpose: footer small print */
  --fz-footer: 0.75rem;

  /* ── Line heights ── */

  /* purpose: tight for large serif headings */
  --lh-heading: 1.2;

  /* purpose: comfortable reading for body prose */
  --lh-body: 1.5;

  /* purpose: single-line UI labels, pills, buttons */
  --lh-ui: 1.25;

  /* ── Font weights ── */

  /* purpose: regular serif for hook_line and body */
  --fw-regular: 400;

  /* purpose: medium serif for gift_name — visually dominant but not heavy */
  --fw-medium: 500;

  /* purpose: semibold serif for hero title */
  --fw-semibold: 600;

  /* purpose: bold for UI labels, slot_kind label, button text */
  --fw-bold: 700;

  /* ── Letter spacings ── */

  /* purpose: slot_kind label — small-caps with wide tracking for legibility */
  --ls-label: 0.08em;

  /* purpose: gift_name — slight tightening for large serif optical balance */
  --ls-heading: -0.01em;

  /* purpose: body text — optical default */
  --ls-body: 0;


  /* ─────────────────────────────────────────────────────────────────────────
   * COLOUR PALETTE
   * ─────────────────────────────────────────────────────────────────────────
   *
   * Palette rationale: podartsev.ru identity — navy + gold + cream.
   * Navy (#002d5b) signals trust, authority, and premium without cold distance.
   * Gold (#a68751) signals warmth, craft, and editorial quality — not gaudy.
   * Cream (#fefafa) body background reads premium and non-digital vs. cold white.
   * Charcoal text (#35373a) avoids harsh pure-black.
   *
   * WCAG 2.1 AA contrast ratios are verified in the a11y task (Task 6).
   * All interactive colour pairs will be checked at that stage.
   *
   * Canonical brand tokens (referenced by later tasks):
   */

  /* ── Canonical brand primitives ── */
  --navy:       #002d5b;   /* header, footer, hooks, headings, primary ink */
  --navy-2:     #00406b;   /* secondary blue — hover states, sub-headings */
  --gold:       #a68751;   /* accent, decorative fills, borders, teaser star, price */
  --gold-light: #c4a776;   /* wordmark, card border highlight, soft divider */
  --gold-btn:   #af905a;   /* WCAG AA: filled gold button bg — navy text on this = 4.56:1 */
  --gold-on-light: #8e6f39; /* WCAG AA: gold text on paper/cream bg = 4.61:1 / 4.52:1 */
  --cream:      #fefafa;   /* body background */
  --paper:      #fffdf9;   /* card surface */

  /* ── Consumer token names (values updated; names preserved for consumers) ── */

  /* purpose: page background — cream, not pure white */
  --color-bg: #fefafa;

  /* purpose: card surface — warm paper for contrast against bg */
  --color-surface: #fffdf9;

  /* purpose: primary text — warm near-black charcoal */
  --color-text: #35373a;

  /* purpose: secondary/muted text — why_them, value_frame, footer */
  --color-muted: #6b6560;

  /* purpose: slot kind label and value_frame captions */
  --color-slot-label: #7a7370;

  /* purpose: card border hairline and divider */
  --color-border: #e7ddc9;

  /* purpose: single brand accent — gold. Used for:
     hook_line text, buy_path link colour, teaser star, divider accent. */
  --color-accent: #a68751;

  /* purpose: very pale gold tint — soft hover/active state backgrounds */
  --color-accent-soft: #f5eddd;

  /* purpose: validation success (remix confirmation, share feedback) */
  --color-success: #246b47;
  --color-success-soft: #ebf5ee;

  /* ── Per-surface focus rings (seamless-nav WG 2026-07-08) ──
     One ring colour cannot pass on both grounds: gold-light is visible on
     the navy chrome (5.99:1) but weak on cream; navy is visible on cream
     but vanishes on the navy bar. Header/footer rules consume on-dark;
     the global cream-surface ring consumes on-light. */

  /* purpose: focus ring on NAVY chrome (site header / footer) — gold-light */
  --focus-ring-on-dark: #c4a776;

  /* purpose: focus ring on CREAM/paper surfaces — navy */
  --focus-ring-on-light: #002d5b;

  /* purpose: focus ring — navy for high contrast keyboard nav visibility
     (legacy consumer name; aliases the per-surface on-light token) */
  --color-focus-ring: var(--focus-ring-on-light);

  /* purpose: page gradient start (slightly lighter than bg) */
  --color-bg-gradient-start: #ffffff;


  /* ─────────────────────────────────────────────────────────────────────────
   * SPACING SCALE
   * ─────────────────────────────────────────────────────────────────────────
   *
   * 8px base unit, golden-ratio adjacent progression.
   * 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px.
   * Named by use context, not just numeric, for self-documentation.
   */

  /* purpose: micro gap — icon padding, tight inline spacing */
  --space-xs: 0.25rem;   /* 4px */

  /* purpose: base unit — gaps within components, label-to-field */
  --space-sm: 0.5rem;    /* 8px */

  /* purpose: component internal padding (card body, button pad H) */
  --space-md: 1rem;      /* 16px */

  /* purpose: card internal padding, section gaps on mobile */
  --space-lg: 1.5rem;    /* 24px */

  /* purpose: card gap in grid, major section spacing */
  --space-xl: 2rem;      /* 32px */

  /* purpose: large section separation, hero margin-bottom */
  --space-2xl: 3rem;     /* 48px */

  /* purpose: page top/bottom padding on desktop */
  --space-3xl: 4rem;     /* 64px */

  /* purpose: maximum content spacing, hero vertical breathing room */
  --space-4xl: 6rem;     /* 96px */

  /* ─────────────────────────────────────────────────────────────────────────
   * PAGE RIBBON BACKGROUND
   * ─────────────────────────────────────────────────────────────────────────
   *
   * Tunable cream veil over the podartsev.ru ribbon page background image.
   * Applied to body — single whole image, no seam, no repeat.
   * 0 = full image (no veil), 1 = fully cream (image invisible).
   * Raise this value to lighten the overall tone of the page ribbon.
   * The veil rgba colour (#fefafa = --cream) matches the body background.
   */
  /* page ribbon-bg veil: 0 = full image, 1 = fully cream. Raise to lighten. */
  --ribbon-veil: 0.22;


  /* ─────────────────────────────────────────────────────────────────────────
   * BORDER RADIUS
   * ─────────────────────────────────────────────────────────────────────────
   *
   * Rationale: premium concierge avoids rounded «friendly» pill shapes.
   * 4px on cards (ТЗ: 2–4px range; minimal rounding signals editorial confidence).
   * 2px for small interactive elements.
   */

  /* purpose: cards, main containers — minimal rounding per ТЗ 2–4px */
  --radius-card: 4px;

  /* purpose: small interactive chips, focus indicators */
  --radius-sm: 2px;

  /* purpose: input fields in quiz form (not cards) — minimal rounding */
  --radius-input: 2px;

  /* purpose: action buttons on cards — minimal rounding, not pill */
  --radius-btn: 2px;


  /* ─────────────────────────────────────────────────────────────────────────
   * SHADOWS
   * ─────────────────────────────────────────────────────────────────────────
   *
   * Rationale: premium concierge uses shadow sparingly.
   * Cards have NO shadow at rest — flat, editorial.
   * Hover state adds very soft lift to signal interactivity.
   */

  /* purpose: no shadow at rest (default card state) */
  --shadow-none: none;

  /* purpose: hover elevation — very soft, navy-toned */
  --shadow-hover: 0 8px 24px rgba(0, 45, 91, 0.08);

  /* purpose: modal / overlay elevation — stronger */
  --shadow-overlay: 0 16px 40px rgba(0, 45, 91, 0.12);


  /* ─────────────────────────────────────────────────────────────────────────
   * MOTION
   * ─────────────────────────────────────────────────────────────────────────
   *
   * Durations and easing follow «system responsive» principle:
   * fast interactions (hover, focus) use short durations;
   * content reveals (card entrance) use slightly longer durations.
   * Easing: ease-out for entries (fast start, eases to rest = responsive feel);
   *         ease-in for exits (stays visible, then accelerates away = natural).
   */

  /* purpose: hover state transitions — button bg, link underline, border */
  --duration-fast: 150ms;

  /* purpose: card state transitions — shadow appear, focus ring */
  --duration-mid: 200ms;

  /* purpose: content reveal animations — card entrance on page load */
  --duration-slow: 300ms;

  /* purpose: ease-out for entrances and state reveals */
  --easing-out: cubic-bezier(0.0, 0.0, 0.2, 1);

  /* purpose: ease-in for exits */
  --easing-in: cubic-bezier(0.4, 0.0, 1, 1);

  /* purpose: standard ease for hover state changes */
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);


  /* ─────────────────────────────────────────────────────────────────────────
   * BREAKPOINTS
   * ─────────────────────────────────────────────────────────────────────────
   *
   * CSS custom properties cannot be used inside @media queries natively,
   * but are documented here as reference values. The actual @media rules
   * in style.css use hard-coded pixel values matching these tokens.
   *
   * bp-small-mobile:  <360px  — single column, minimum viable layout
   * bp-mobile:       ≥360px  — standard mobile (most Android/iPhone)
   * bp-tablet:       ≥768px  — tablet, 2-column card grid
   * bp-desktop:      ≥1024px — desktop, 3-column card grid
   */
  --bp-small-mobile: 360px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;


  /* ─────────────────────────────────────────────────────────────────────────
   * LAYOUT CONSTRAINTS
   * ─────────────────────────────────────────────────────────────────────────
   */

  /* purpose: maximum content width on desktop */
  --max-content-width: 1200px;

  /* purpose: card page horizontal padding on mobile */
  --page-padding-mobile: var(--space-md);

  /* purpose: card page horizontal padding on tablet+ */
  --page-padding-tablet: var(--space-xl);

  /* purpose: card page horizontal padding on desktop */
  --page-padding-desktop: var(--space-3xl);

}