/* =========================================================================
   ENORA SCHOOL — Colors & Type
   Школа английского. Бордовый × кремовый × курсивный сериф.
   ========================================================================= */

/* ---- Webfonts ----------------------------------------------------------- */
/* Playfair Display — display italic serif (Cyrillic) */
/* Onest — modern geometric sans (Cyrillic) */
/* Pinyon Script — calligraphic accent (Latin only — for "est. 2026", numerals) */
/* Caveat — handwritten Cyrillic accent */
/* NB: fonts are loaded via <link rel="preconnect"> + <link rel="stylesheet"> in
   index.html <head> so they fetch in parallel with the CSS (no @import chain). */

:root {
  /* =====================================================================
     COLORS — Brand
     ===================================================================== */
  --burgundy:           #3E000C;   /* primary corporate */
  --burgundy-deep:      #2A0008;   /* deeper, shadow-side */
  --burgundy-ink:       #1C0005;   /* near-black, text on cream */
  --burgundy-soft:      #5C1A26;   /* secondary surface */
  --burgundy-tint:      #7A2A38;   /* hover / accent */

  --cream:              #F8E9D2;   /* primary cream surface */
  --cream-warm:         #F2DBB8;   /* deeper cream */
  --cream-bright:       #FFF5E1;   /* highlight cream */
  --cream-paper:        #EDD9B5;   /* paper / aged */

  --gold:               #C9A24A;   /* brass accent, subtle */
  --gold-soft:          #E2C078;
  --ember:              #E36B2E;   /* fire emoji vibe — accent only */

  /* ---------------------------------------------------------------------
     Decorative-pattern background levels (used with `.enora-waves`).
     Naming intentionally separate from cream-scale: these are explicit
     stops, not semantic surfaces.
     --------------------------------------------------------------------- */
  --bg-white:           #FFFFFF;   /* cleanest, modern; pair waves at α .08–.75 */
  --bg-beige-light:     #FFF7EE;   /* default, editorial-organic warmth */
  --bg-beige:           #FFECD1;   /* richer, used for stats / pull-quotes */
  --bg-burgundy:        #3E000C;   /* dark inversion; waves switch to brown + gold */

  /* =====================================================================
     COLORS — Semantic (light mode default)
     ===================================================================== */
  --bg:                 var(--cream);
  --bg-alt:             var(--cream-warm);
  --bg-elevated:        var(--cream-bright);
  --bg-inverse:         var(--burgundy);

  --surface:            var(--cream-bright);
  --surface-alt:        var(--cream-warm);
  --surface-inverse:    var(--burgundy-deep);

  --fg:                 var(--burgundy-ink);
  --fg-muted:           color-mix(in oklab, var(--burgundy-ink) 70%, var(--cream));
  --fg-subtle:          color-mix(in oklab, var(--burgundy-ink) 50%, var(--cream));
  --fg-inverse:         var(--cream);
  --fg-inverse-muted:   color-mix(in oklab, var(--cream) 75%, var(--burgundy));

  --line:               color-mix(in oklab, var(--burgundy-ink) 18%, transparent);
  --line-strong:        color-mix(in oklab, var(--burgundy-ink) 35%, transparent);
  --line-inverse:       color-mix(in oklab, var(--cream) 25%, transparent);

  --accent:             var(--burgundy);
  --accent-fg:          var(--cream);

  --focus-ring:         color-mix(in oklab, var(--burgundy) 50%, var(--gold));

  /* =====================================================================
     SPACING — 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;

  /* =====================================================================
     RADII
     ===================================================================== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* =====================================================================
     SHADOWS — soft on cream, deep on burgundy
     ===================================================================== */
  --shadow-xs: 0 1px 2px rgba(28, 0, 5, 0.08);
  --shadow-sm: 0 4px 12px -4px rgba(28, 0, 5, 0.12);
  --shadow-md: 0 12px 28px -10px rgba(28, 0, 5, 0.22);
  --shadow-lg: 0 28px 60px -18px rgba(28, 0, 5, 0.32);
  --shadow-glow: 0 0 0 1px rgba(201, 162, 74, 0.4), 0 16px 40px -12px rgba(62, 0, 12, 0.35);

  /* =====================================================================
     TYPE — Stack
     ===================================================================== */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Pinyon Script", "Allura", cursive;
  --font-hand:    "Caveat", "Bradley Hand", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* =====================================================================
     TYPE — Scale (fluid via clamp)
     ===================================================================== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   clamp(22px, 1.4vw + 16px, 28px);
  --text-2xl:  clamp(28px, 2vw + 18px, 40px);
  --text-3xl:  clamp(36px, 3vw + 20px, 56px);
  --text-4xl:  clamp(48px, 5vw + 24px, 88px);
  --text-5xl:  clamp(64px, 8vw + 32px, 144px);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-elegant: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce-gentle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --dur-cinematic: 1100ms;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY
   ========================================================================= */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.font-display { font-family: var(--font-display); font-style: italic; }
.font-body    { font-family: var(--font-body); }
.font-script  { font-family: var(--font-script); }
.font-hand    { font-family: var(--font-hand); }

/* Display sizes — large, italic, editorial */
h1, .h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
}

.hand {
  font-family: var(--font-hand);
  font-weight: 500;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg-muted);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* =========================================================================
   FOCUS — accessible, on-brand
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--burgundy); color: var(--cream); }
/* =========================================================================
   DECORATIVE WAVE PATTERN — see assets/wave-pattern.svg
   Drop the SVG inline (or as <img>) inside a host with one of the
   .wave-bg-* modifier classes. The host clips and the SVG fills 100%.
   ========================================================================= */
.wave-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-beige-light);
  --w1: #EADBC2;
  --w2: #D9C29E;
  --w3: #C9A674;
  --w-line: #B89055;
}
.wave-bg > .enora-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.wave-bg > :not(.enora-waves) { position: relative; z-index: 1; }

/* --- background level modifiers ------------------------------------- */
.wave-bg--white         { background: var(--bg-white);        --w1:#F0E2CC; --w2:#E1CBA8; --w3:#CFAE83; --w-line:#B89055; }
.wave-bg--beige-light   { background: var(--bg-beige-light);  --w1:#EADBC2; --w2:#D9C29E; --w3:#C9A674; --w-line:#B89055; }
.wave-bg--beige         { background: var(--bg-beige);        --w1:#E6CFA9; --w2:#D4B783; --w3:#C19A60; --w-line:#9F7838; }
.wave-bg--burgundy      { background: var(--bg-burgundy);     --w1:#4A1018; --w2:#5C1A26; --w3:#6B2935; --w-line:#C9A24A; }

/* Optional density helpers */
.wave-bg--quiet > .enora-waves { opacity: 0.45; }
.wave-bg--loud  > .enora-waves { opacity: 1; }

/* Slow ambient drift (opt in with .wave-bg--drift) */
@media (prefers-reduced-motion: no-preference) {
  .wave-bg--drift > .enora-waves {
    animation: enora-wave-drift 28s linear infinite;
    transform-origin: 50% 50%;
  }
  @keyframes enora-wave-drift {
    0%   { transform: translate3d(0,0,0) scaleY(1); }
    50%  { transform: translate3d(-1.5%, 0.5%, 0) scaleY(1.015); }
    100% { transform: translate3d(0,0,0) scaleY(1); }
  }
}