/* =============================================================================
   Mentava Design System — Colors & Type
   Two systems share the same root palette but diverge on tone.
   ========================================================================== */

/* -------- Fonts ---------------------------------------------------------- */
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

@font-face { font-family: "Lora"; src: url("fonts/Lora-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "Luckiest Guy"; src: url("fonts/LuckiestGuy-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* =============================================================================
   BRAND PALETTE — logo-derived letter colors.
   These are sampled directly from the Mentava wordmark. Use sparingly as
   accents and celebration colors. Do NOT rainbow gradients across UI.
   ========================================================================== */
:root {
  --brand-blue:   #45AAD7;  /* M */
  --brand-yellow: #F0B429;  /* E */
  --brand-green:  #7DBF3A;  /* N */
  --brand-orange: #F07C3A;  /* T */
  --brand-teal:   #2FAFA8;  /* A */
  --brand-purple: #8E6FBC;  /* V */
  --brand-leaf:   #4FBF5D;  /* A */
  --brand-coral:  #F87171;  /* smile */

  /* Deeper / darker variants for text on light backgrounds, hover/press */
  --brand-blue-700:   #2B7FA8;
  --brand-yellow-700: #B8811A;
  --brand-green-700:  #568826;
  --brand-orange-700: #C05820;
  --brand-teal-700:   #1F7E79;
  --brand-purple-700: #6B4F9A;
  --brand-coral-700:  #C85555;

  /* Tints (10–12% blends with white) for backgrounds, card fills */
  --brand-blue-50:   #E4F3FB;
  --brand-yellow-50: #FBF1D9;
  --brand-green-50:  #EBF6DD;
  --brand-orange-50: #FBE4D7;
  --brand-teal-50:   #DBF0EE;
  --brand-purple-50: #EDE6F7;
  --brand-coral-50:  #FDE2E2;
}

/* =============================================================================
   PARENT SYSTEM — calm, high-trust, premium tool.
   Inspiration: Linear, Stripe, Lovevery, Mercury, Oura.
   ========================================================================== */
[data-system="parent"], .mnt-parent {
  /* Ink / surface neutrals — warm off-whites, deep slate ink */
  --mnt-ink:            #0E1116;  /* primary text, very dark slate */
  --mnt-ink-2:          #3C424D;  /* secondary text */
  --mnt-ink-3:          #6B7280;  /* tertiary / captions */
  --mnt-ink-4:          #9AA0AA;  /* disabled / placeholder */

  --mnt-surface:        #FFFFFF;
  --mnt-surface-2:      #FAF8F4;  /* warm page base — "paper" */
  --mnt-surface-3:      #F2EEE7;  /* raised tint */
  --mnt-surface-sunken: #EDE8DF;  /* sunken / subtle fills */

  --mnt-line:           #E6E1D6;  /* default border */
  --mnt-line-strong:    #D4CDBE;  /* inputs, dividers at higher contrast */
  --mnt-line-subtle:    rgba(14, 17, 22, 0.06);

  /* Accent — "Mentava Ink Teal"; restrained single-accent approach */
  --mnt-accent:         #1F7E79;
  --mnt-accent-hover:   #196862;
  --mnt-accent-press:   #14524D;
  --mnt-accent-soft:    #DBF0EE;
  --mnt-accent-ink:     #0C3D3A;

  /* Semantic */
  --mnt-success:        #3E8F4B;
  --mnt-success-soft:   #E6F3E8;
  --mnt-warning:        #B8811A;
  --mnt-warning-soft:   #FBF1D9;
  --mnt-danger:         #C44545;
  --mnt-danger-soft:    #FCE4E4;
  --mnt-info:           #2B7FA8;
  --mnt-info-soft:      #E4F3FB;

  /* Focus */
  --mnt-focus-ring:     rgba(31, 126, 121, 0.35);

  /* Shadows — soft, short, warm-tinted */
  --mnt-shadow-xs:      0 1px 2px rgba(14, 17, 22, 0.05);
  --mnt-shadow-sm:      0 1px 3px rgba(14, 17, 22, 0.06), 0 1px 2px rgba(14, 17, 22, 0.04);
  --mnt-shadow-md:      0 4px 12px rgba(14, 17, 22, 0.07), 0 2px 4px rgba(14, 17, 22, 0.04);
  --mnt-shadow-lg:      0 12px 32px rgba(14, 17, 22, 0.09), 0 4px 8px rgba(14, 17, 22, 0.05);
  --mnt-shadow-xl:      0 24px 56px rgba(14, 17, 22, 0.12), 0 8px 16px rgba(14, 17, 22, 0.06);

  /* Radii — measured, not playful */
  --mnt-radius-xs:   4px;
  --mnt-radius-sm:   6px;
  --mnt-radius-md:   10px;
  --mnt-radius-lg:   14px;
  --mnt-radius-xl:   20px;
  --mnt-radius-pill: 999px;

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

  /* Type — sans for product UI, serif for editorial moments */
  --mnt-font-sans:    "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mnt-font-serif:   "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --mnt-font-display: "Lora", ui-serif, Georgia, serif; /* editorial hero */
  --mnt-font-mono:    ui-monospace, SFMono-Regular, "Menlo", monospace;

  /* Motion — short, ease-out; no bounces */
  --mnt-ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --mnt-ease-gentle:   cubic-bezier(0.32, 0.72, 0.3, 1);
  --mnt-dur-fast:      120ms;
  --mnt-dur:           180ms;
  --mnt-dur-slow:      280ms;
}

/* Semantic type tokens — parent */
[data-system="parent"], .mnt-parent {
  color: var(--mnt-ink);
  background: var(--mnt-surface-2);
  font-family: var(--mnt-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.mnt-parent .mnt-display,
[data-system="parent"] .mnt-display {
  font-family: var(--mnt-font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mnt-ink);
}
.mnt-parent h1, [data-system="parent"] h1 {
  font-family: var(--mnt-font-display);
  font-weight: 500; font-size: 44px; line-height: 1.08; letter-spacing: -0.02em;
}
.mnt-parent h2, [data-system="parent"] h2 {
  font-family: var(--mnt-font-sans); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em;
}
.mnt-parent h3, [data-system="parent"] h3 {
  font-family: var(--mnt-font-sans); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em;
}
.mnt-parent h4, [data-system="parent"] h4 {
  font-family: var(--mnt-font-sans); font-weight: 600; font-size: 16px; line-height: 1.35;
}
.mnt-parent p, [data-system="parent"] p {
  font-family: var(--mnt-font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--mnt-ink-2);
}
.mnt-parent .mnt-lede, [data-system="parent"] .mnt-lede {
  font-family: var(--mnt-font-serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--mnt-ink-2);
}
.mnt-parent .mnt-caption, [data-system="parent"] .mnt-caption {
  font-size: 13px; line-height: 1.4; color: var(--mnt-ink-3); letter-spacing: 0.01em;
}
.mnt-parent .mnt-eyebrow, [data-system="parent"] .mnt-eyebrow {
  font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mnt-accent);
}
.mnt-parent code, .mnt-parent .mnt-mono, [data-system="parent"] code {
  font-family: var(--mnt-font-mono); font-size: 13px; background: var(--mnt-surface-3); padding: 2px 6px; border-radius: 4px; color: var(--mnt-ink);
}

/* =============================================================================
   CHILD SYSTEM — playful, juicy, premium-toy.
   Inspiration: Supercell (Clash Royale, Hay Day), Royal Kingdom.
   Principle: chunky depth, crisp outlines, confident color, no gradients-for-gradients.
   ========================================================================== */
[data-system="child"], .mnt-child {
  /* Scene "sky" and ground — richer and friendlier than the parent paper */
  --kid-sky:          #F4E8C8;  /* warm wheat — farm scene */
  --kid-sky-2:        #FFF6DE;
  --kid-cloud:        #FFFFFF;
  --kid-soil:         #8B5A3C;
  --kid-grass:        #7DBF3A;

  /* Ink for kid UI — strong outlines rather than grays */
  --kid-ink:          #1F2430;
  --kid-ink-outline: #2A1E14;

  /* Primary action — "Play green" from the logo */
  --kid-go:           #4FBF5D;
  --kid-go-dark:      #2E8F3E;   /* chunky 3D bottom */
  --kid-go-light:     #8DDD7A;   /* top highlight */

  --kid-primary:      #45AAD7;   /* blue — neutral primary actions */
  --kid-primary-dark: #2870A5;
  --kid-primary-light:#8FD2EF;

  --kid-warning:      #F0B429;   /* yellow stars / coins */
  --kid-warning-dark: #B57D10;
  --kid-warning-light:#FFD773;

  --kid-danger:       #F87171;
  --kid-danger-dark:  #C74949;

  --kid-accent-purple:#8E6FBC;
  --kid-accent-orange:#F07C3A;
  --kid-accent-teal:  #2FAFA8;
  --kid-accent-coral: #F87171;

  --kid-star:         #FFD773;
  --kid-star-dark:    #F0B429;

  /* Surfaces */
  --kid-panel:        #FFFDF5;  /* warm cream panel */
  --kid-panel-2:      #FFF0C8;  /* secondary panel tint */
  --kid-panel-ink:    #3B2A1A;  /* text ON panel */
  --kid-panel-line:   #E8D79C;  /* warm outline */

  /* Protection gradients for text over scenes */
  --kid-protection:   linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);

  /* "Juicy" chunky shadows — long, pigmented drop */
  --kid-shadow-button:   0 6px 0 0 var(--kid-go-dark), 0 10px 18px rgba(46, 143, 62, 0.35);
  --kid-shadow-panel:    0 10px 0 rgba(59, 42, 26, 0.18), 0 18px 36px rgba(59, 42, 26, 0.22);
  --kid-shadow-float:    0 14px 40px rgba(31, 36, 48, 0.22);
  --kid-shadow-press:    inset 0 3px 0 rgba(0, 0, 0, 0.15);

  /* Borders — thick, dark, chunky */
  --kid-stroke:     4px;
  --kid-stroke-2:   6px;
  --kid-outline:    var(--kid-ink-outline);

  /* Radii — big, rounded, toy-like */
  --kid-radius-sm:   12px;
  --kid-radius-md:   18px;
  --kid-radius-lg:   28px;
  --kid-radius-xl:   40px;
  --kid-radius-pill: 9999px;

  /* Type — kids read with Lexend. Celebration gets Luckiest Guy. */
  --kid-font-ui:       "Lexend", system-ui, sans-serif;
  --kid-font-display:  "Luckiest Guy", "Lexend", system-ui, sans-serif;
  --kid-font-read:     "Lexend", system-ui, sans-serif;

  /* Motion — bounces and squash/stretch OK here */
  --kid-ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --kid-ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot */
  --kid-ease-squash:cubic-bezier(0.5, 0, 0.75, 0);
  --kid-dur-fast:   120ms;
  --kid-dur:        220ms;
  --kid-dur-slow:   420ms;

  color: var(--kid-ink);
  font-family: var(--kid-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Semantic type — child */
.mnt-child .kid-display,
[data-system="child"] .kid-display {
  font-family: var(--kid-font-display);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-shadow: 0 4px 0 var(--kid-outline), 0 8px 16px rgba(0,0,0,0.25);
}
.mnt-child .kid-title, [data-system="child"] .kid-title {
  font-family: var(--kid-font-display);
  font-size: 48px; line-height: 1.0;
  color: var(--kid-panel-ink);
  letter-spacing: 0.01em;
}
.mnt-child .kid-h2, [data-system="child"] .kid-h2 {
  font-family: var(--kid-font-ui);
  font-weight: 800; font-size: 28px; line-height: 1.15;
  color: var(--kid-panel-ink);
}
.mnt-child .kid-body, [data-system="child"] .kid-body {
  font-family: var(--kid-font-read);
  font-weight: 500; font-size: 20px; line-height: 1.45;
  color: var(--kid-panel-ink);
}
.mnt-child .kid-button-label, [data-system="child"] .kid-button-label {
  font-family: var(--kid-font-ui);
  font-weight: 800; font-size: 22px; letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.22);
}
.mnt-child .kid-letter, [data-system="child"] .kid-letter {
  /* Used when showing words/letters for reading — high-legibility, wide */
  font-family: var(--kid-font-read);
  font-weight: 500; font-size: 96px; line-height: 1.0;
  letter-spacing: 0.04em;
  color: var(--kid-ink);
}

/* =============================================================================
   SHARED UTILITIES
   ========================================================================== */
.mnt-reset { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }