/* ==========================================================================
   Panda School Design System — Core tokens
   Brand: Lapaz / Panda School
   ========================================================================== */

/* Webfonts — Google Fonts substitutes (see README "Type" for original intent)
   - Display serif:  Fraunces (closest to the "Playfair/Lora Black" character
     described in the brief — has a similar bold-italic warmth and supports
     Cyrillic + Latin).  TODO: swap for licensed fonts when supplied.
   - Body sans:      DM Sans (matches the "DM Sans / Inter" reference).
*/
/* Display: Unbounded — rounded, friendly, has real personality at heavy weights.
   Body:    Manrope — warm geometric sans, excellent Cyrillic.
   Both support Latin + Cyrillic. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ----- Palette: raw brand colors ------------------------------------- */
  --ps-cream:           #FFFDF8;  /* Warm off-white page bg */
  --ps-white:           #FFFFFF;  /* Card / input bg */

  --ps-lime:            #D6F26B;  /* Accent 1 — primary CTA, step blocks, underlines */
  --ps-lime-soft:       #EAF7A8;  /* Lime tint for hover / soft fills */
  --ps-lime-deep:       #B6D848;  /* Lime pressed / outline */

  --ps-coral:           #FF5A5F;  /* Accent 2 — markers, badges, form CTA */
  --ps-coral-soft:      #FFE0E0;  /* Coral tint */
  --ps-coral-deep:      #E83D43;  /* Coral pressed */

  --ps-yellow:          #FFE066;  /* Accent 3 — decorative blob */
  --ps-blue:            #BFD3F2;  /* Accent 4 — wave section bg */
  --ps-mint:            #B8E6D0;  /* Accent 5 — decorative blob */
  --ps-pink:            #FFB6D1;  /* Accent 6 — soft pink card / blob */
  --ps-magenta:         #FF4FA8;  /* Accent 7 — magenta blob highlight */
  --ps-orange:          #FF9A5A;  /* Accent 8 — orange blob */

  /* ----- Text ---------------------------------------------------------- */
  --ps-ink:             #1A1A1A;  /* Headings, primary text */
  --ps-ink-2:           #6B6B6B;  /* Secondary text, captions */
  --ps-ink-3:           #A8A8A8;  /* Disabled / placeholder */
  --ps-line:            #ECE9E0;  /* Hairline border on cream */
  --ps-line-strong:     #D8D3C4;  /* Stronger border */

  /* ----- Semantic surfaces -------------------------------------------- */
  --ps-bg:              var(--ps-cream);
  --ps-bg-alt:          #FAF6EC;  /* Slightly deeper cream for nested sections */
  --ps-surface:         var(--ps-white);
  --ps-surface-wave:    var(--ps-blue);

  --ps-fg:              var(--ps-ink);
  --ps-fg-muted:        var(--ps-ink-2);
  --ps-fg-soft:         var(--ps-ink-3);

  --ps-accent:          var(--ps-lime);
  --ps-accent-fg:       var(--ps-ink);  /* lime is light → use dark text */
  --ps-danger:          var(--ps-coral);
  --ps-danger-fg:       var(--ps-white);

  /* ----- Type families ------------------------------------------------ */
  --ps-font-display:    'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ps-font-body:       'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ps-font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ----- Type scale (px → rem-ish; assumes 16px root) ----------------- */
  --ps-fs-h1:           48px;   /* hero title */
  --ps-fs-h2:           36px;   /* section title */
  --ps-fs-h3:           24px;   /* card title */
  --ps-fs-h4:           20px;   /* subheading */
  --ps-fs-stat:         40px;   /* large stat numerals */
  --ps-fs-step:         48px;   /* step numeral */
  --ps-fs-body:         16px;
  --ps-fs-body-sm:      14px;
  --ps-fs-caption:      13px;
  --ps-fs-label:        12px;

  --ps-lh-tight:        1.05;
  --ps-lh-snug:         1.2;
  --ps-lh-normal:       1.5;
  --ps-lh-loose:        1.7;

  --ps-tracking-tight:  -0.02em;
  --ps-tracking-normal: 0;
  --ps-tracking-wide:   0.04em;
  --ps-tracking-caps:   0.08em;

  /* ----- Spacing scale (4px base) ------------------------------------- */
  --ps-sp-1:  4px;
  --ps-sp-2:  8px;
  --ps-sp-3:  12px;
  --ps-sp-4:  16px;
  --ps-sp-5:  20px;
  --ps-sp-6:  24px;
  --ps-sp-7:  32px;
  --ps-sp-8:  40px;
  --ps-sp-9:  56px;
  --ps-sp-10: 72px;
  --ps-sp-11: 96px;
  --ps-sp-12: 128px;

  /* ----- Radii — generous, pill-friendly ------------------------------ */
  --ps-radius-sm:    8px;
  --ps-radius-md:    12px;   /* form inputs */
  --ps-radius-lg:    20px;   /* cards */
  --ps-radius-xl:    28px;   /* large containers, step blocks */
  --ps-radius-2xl:   40px;
  --ps-radius-pill:  999px;  /* buttons, pills */

  /* ----- Shadows — barely-there, warm tinted -------------------------- */
  --ps-shadow-xs:   0 1px 2px rgba(26, 26, 26, 0.04);
  --ps-shadow-sm:   0 2px 8px rgba(26, 26, 26, 0.05);
  --ps-shadow-md:   0 8px 24px rgba(26, 26, 26, 0.06);
  --ps-shadow-lg:   0 18px 48px rgba(26, 26, 26, 0.08);
  --ps-shadow-cta:  0 6px 18px rgba(168, 200, 46, 0.35);  /* lime glow */
  --ps-shadow-cta-coral: 0 6px 18px rgba(255, 77, 77, 0.30);

  /* ----- Motion ------------------------------------------------------- */
  --ps-ease-soft:   cubic-bezier(0.32, 0.72, 0.24, 1);
  --ps-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ps-dur-fast:    140ms;
  --ps-dur-base:    220ms;
  --ps-dur-slow:    360ms;

  /* ----- Z layering --------------------------------------------------- */
  --ps-z-base:    0;
  --ps-z-blob:    1;     /* decorative blobs sit above bg, below content */
  --ps-z-content: 2;
  --ps-z-overlay: 50;
  --ps-z-toast:   100;
}

/* ==========================================================================
   Semantic element styles — drop into any page that imports the tokens.
   ========================================================================== */

html, body {
  background: var(--ps-bg);
  color: var(--ps-fg);
  font-family: var(--ps-font-body);
  font-size: var(--ps-fs-body);
  line-height: var(--ps-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ps-font-display);
  color: var(--ps-fg);
  font-weight: 700;
  line-height: var(--ps-lh-snug);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--ps-fs-h1); font-weight: 700; line-height: 1.08; }
h2 { font-size: var(--ps-fs-h2); font-weight: 700; line-height: 1.1; }
h3 { font-size: var(--ps-fs-h3); font-weight: 600; }
h4 { font-size: var(--ps-fs-h4); font-weight: 600; }

.ps-subhead {
  font-family: var(--ps-font-body);
  font-weight: 500;
  font-size: var(--ps-fs-h4);
  color: var(--ps-fg-muted);
}

p, .ps-body {
  font-family: var(--ps-font-body);
  font-size: var(--ps-fs-body);
  color: var(--ps-fg-muted);
  line-height: var(--ps-lh-normal);
  text-wrap: pretty;
  margin: 0;
}

.ps-caption {
  font-family: var(--ps-font-body);
  font-size: var(--ps-fs-caption);
  color: var(--ps-fg-muted);
  letter-spacing: var(--ps-tracking-wide);
}

.ps-eyebrow {
  font-family: var(--ps-font-body);
  font-size: var(--ps-fs-label);
  font-weight: 600;
  letter-spacing: var(--ps-tracking-caps);
  text-transform: uppercase;
  color: var(--ps-fg-muted);
}

.ps-stat-num {
  font-family: var(--ps-font-display);
  font-weight: 700;
  font-size: var(--ps-fs-stat);
  line-height: 1;
  color: var(--ps-ink);
  letter-spacing: -0.03em;
}
.ps-stat-label {
  font-family: var(--ps-font-body);
  font-size: var(--ps-fs-caption);
  color: var(--ps-fg-muted);
  margin-top: 4px;
}

/* Wavy underline — the brand's signature highlight on key words.
   Use as: <span class="ps-mark">за 10 дней</span>
   The SVG is an inline data-uri so cards work standalone. */
.ps-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: 0 0.05em 0.22em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 Q 25 2, 50 7 T 100 8 T 150 6 T 198 9' stroke='%23C8E64A' stroke-width='5' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 0.42em;
}
.ps-mark--coral {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 Q 25 2, 50 7 T 100 8 T 150 6 T 198 9' stroke='%23FF4D4D' stroke-width='5' stroke-linecap='round' fill='none'/></svg>");
}