/* ==========================================================================
   LAYMI — tokens.css
   SoT: teya-memory/design/AURADESIGN.md v2.0
   Единственное место с литеральными значениями. main.css → только var().
   ========================================================================== */

/* --- Circe ExtraBold: logo wordmark only. Same-origin woff2 + preload in functions.php --- */
@font-face {
  font-family: "Circe ExtraBold";
  src: local("Circe ExtraBold"),
       local("Circe-ExtraBold"),
       local("CirceExtraBold"),
       url("../fonts/Circe-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surfaces --- */
  --bg-base: #F5F2ED;
  --bg-alt: #EDE6DC;
  --surface: #FBFAF7;

  /* --- Ink / accent (chocolate) --- */
  --ink: #3C2A21;
  --muted: #6B5E52;
  --muted-alt: #5A4E44;
  --accent: #3C2A21;
  --accent-deep: #2A1D17;
  --on-accent: #FFFFFF;
  --on-accent-cream: #F5F2ED;

  /* --- Lines --- */
  --line: #D4C8B8;
  --line-alt: #C4B8A8;

  /* --- Header --- */
  /* Over hero: clear glass — no milk plaque (was 62% + 16px blur) */
  --header-over-hero: transparent;
  --header-blur: 0px;
  --header-solid: #F5F2ED;
  --header-on-hero: #F5F2ED;

  /* --- Hero on photo --- */
  --hero-ink: #F5F2ED;
  --hero-ink-muted: color-mix(in srgb, #F5F2ED 92%, transparent);
  --hero-text-shadow: 0 1px 18px rgb(0 0 0 / 0.45), 0 0 2px rgb(0 0 0 / 0.35);

  /* --- Photo / atmosphere --- */
  --photo-warm: #E8E0D4;
  --photo-scrim-darken: 0.2;
  /* Cream veil over photo-bg: AA body/lead on equestrian photos (v0.3.20: 52%→66%) */
  --photo-scrim-cream: color-mix(in srgb, #F5F2ED 66%, transparent);
  --atmosphere-blur: 48px;
  --atmosphere-opacity: 0.35;

  /* --- Straight soft-blur seam (v0.3.33 — desktop 480 symmetric) ---
     Waves deprecated for section transitions.
     Desktop: --seam-h = 480px → 240 up + 240 down (translateY 50%, mask peak 50%).
     --seam-soft-blur = 28.6px (26px +10%). Mobile values unchanged (media below).
     Wide vertical feather: blur tail reaches seam-h/2 into receiver,
     receiver clearance handled in main.css (.section--has-seam + .section).
     Opaque cream fog-strip (#F5F2ED fill) FORBIDDEN.
     Legacy --wave-h kept at 0 so old selectors don't invent height. */
  --wave-h: 0px;
  --wave-h-mobile: 0px;
  --seam-h: 480px;
  --seam-h-mobile: 110px;
  --seam-soft-h: var(--seam-h);
  --seam-soft-blur: 28.6px;

  /* --- Hero seam sync (v0.3.33 — same canon as base, no asymmetry) ---
     Desktop: 480 / 240 / 240 / blur 28.6 — единый канон со всеми стыками.
     Mobile hero-* vars unchanged (media assigns from *-mobile). */
  --seam-hero-h: 480px;
  --seam-hero-h-mobile: 330px;
  --seam-hero-up: 240px;
  --seam-hero-up-mobile: 110px;
  --seam-hero-down: 240px;
  --seam-hero-down-mobile: 220px;
  --seam-hero-blur: 28.6px;
  --seam-hero-blur-mobile: 24px;

  /* --- Functional --- */
  --error: #9C3D2E;
  --success: #4E6339;
  --overlay: rgb(60 42 33 / 0.4);

  /* --- Fonts --- */
  --font-display: "Cormorant Garamond", "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-logo: "Circe ExtraBold", "Circe", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Type scale --- */
  --text-display-lg: clamp(1.75rem, 1.1rem + 3vw, 3.25rem);
  --text-headline-md: clamp(1.5rem, 1.125rem + 1.9vw, 2.25rem);
  --text-headline-sm: clamp(1.25rem, 1.1rem + 0.8vw, 1.563rem);
  --text-product: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-card-title: 1rem;
  --text-price: 1.125rem;
  --text-label: 0.75rem;
  --text-button: 0.8125rem;
  --text-nav: 0.75rem;
  --text-logo: 1.25rem;

  --lh-display: 1.12;
  --lh-headline-md: 1.18;
  --lh-headline-sm: 1.25;
  --lh-body-lg: 1.55;
  --lh-body: 1.6;
  --lh-card-title: 1.35;
  --lh-price: 1.3;
  --lh-label: 1.4;
  --lh-button: 1.2;
  --lh-nav: 1.2;
  --lh-logo: 1.2;

  --tracking-display: 0.08em;
  --tracking-nav: 0.1em;
  --tracking-logo: 0.14em;
  --tracking-label: 0.1em;
  --tracking-button: 0.08em;

  /* --- Spacing --- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 120px;

  --container: 1240px;
  --measure: 65ch;
  --gutter: var(--space-md);
  --section-block: clamp(var(--space-2xl), 8vw, var(--space-5xl));

  /* --- Radius --- */
  --radius-none: 0;
  --radius-sm: 2px;

  /* --- Motion (editorial-calm, spring ≥ 0.6 feel) --- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-reduced: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Chrome --- */
  --header-h: 72px;
  --header-h-scrolled: 64px;
  --touch: 44px;
  --icon: 20px;
  --btn-h: 48px;
  --ring: 2px;
  --hairline: 1px;

  /* Frame B studio linen (HITL 2026-08-08 / theme 0.3.30). Apply after photo-scrim. */
  --frame-b-pad-md: 14px;
  --frame-b-pad-lg: 18px;
  --frame-b-pad-sm: 10px;
  --frame-b-pad: var(--frame-b-pad-md);
  --frame-b-radius-outer-md: 30px;
  --frame-b-radius-outer-lg: 42px;
  --frame-b-radius-outer-sm: 22px;
  --frame-b-radius-outer: var(--frame-b-radius-outer-md);
  --frame-b-radius-inner-md: 16px;
  --frame-b-radius-inner-lg: 24px;
  --frame-b-radius-inner-sm: 12px;
  --frame-b-radius-inner: var(--frame-b-radius-inner-md);
  --frame-b-mat-bg: color-mix(in srgb, #ede6dc 70%, #f5f2ed);
  --frame-b-border-width: 1px;
  --frame-b-border-color: color-mix(in srgb, #3c2a21 22%, #d4c8b8);
  --frame-b-border: var(--frame-b-border-width) solid var(--frame-b-border-color);
  --frame-b-shadow: 0 14px 28px -10px rgba(60, 42, 33, 0.12), 0 4px 10px -4px rgba(60, 42, 33, 0.06), inset 0 0 0 1px rgba(255, 253, 248, 0.55), inset 0 0 0 2px rgba(212, 200, 184, 0.45);
  --frame-b-img-shadow: inset 0 0 0 1px rgba(60, 42, 33, 0.06);
}

@media (max-width: 47.99em) {
  :root {
    --wave-h: var(--wave-h-mobile);
    --seam-h: var(--seam-h-mobile);
    --seam-soft-h: var(--seam-h-mobile);
    --seam-soft-blur: 20px;
    --seam-hero-h: var(--seam-hero-h-mobile);
    --seam-hero-up: var(--seam-hero-up-mobile);
    --seam-hero-down: var(--seam-hero-down-mobile);
    --seam-hero-blur: var(--seam-hero-blur-mobile);
  }
}

@media (min-width: 40em) {
  :root {
    --gutter: var(--space-lg);
  }
}