/* ============================================================
   WARREN HOPZ DESIGN SYSTEM — TOKENS (consolidated)
   Imported from the claude.ai/design "Warren Hopz Design System".
   Order matters: @import (fonts) must come first.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap');

/* ---------------- TYPOGRAPHY ---------------- */
/* ui-rounded = SF Pro Rounded Apple-eszközökön (Safari); másutt az
   M PLUS Rounded 1c adja ugyanazt a lekerekített karaktert. */
:root {
  --font-display: ui-rounded, 'M PLUS Rounded 1c', 'Trebuchet MS', system-ui, sans-serif;
  --font-sans:    ui-rounded, 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-rounded, 'M PLUS Rounded 1c', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-display: 4.5rem;
  --text-h1:      3rem;
  --text-h2:      2.25rem;
  --text-h3:      1.625rem;
  --text-h4:      1.25rem;
  --text-lead:    1.25rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-eyebrow: 0.8125rem;

  --weight-regular: 400;
  --weight-medium:  600;
  --weight-bold:    700;
  --weight-extra:   800;
  --weight-black:   900;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;
}

/* ---------------- COLORS ---------------- */
:root {
  --wh-gold: #FFD88A; --wh-honey: #B87A3E; --wh-cream: #FFF3E0;
  --wh-green: #8FBD7A; --wh-carrot: #FF8A3C; --wh-pink: #FFC0C7;

  --carrot-50:#FFF1E6; --carrot-100:#FFE0C9; --carrot-200:#FFC79E; --carrot-300:#FFA96C;
  --carrot-400:#FF9A50; --carrot-500:#FF8A3C; --carrot-600:#EE7222; --carrot-700:#C75C18;
  --carrot-800:#9C4814; --carrot-900:#743513;

  --gold-50:#FFFBEF; --gold-100:#FFF3D4; --gold-200:#FFE9B8; --gold-300:#FFE0A0;
  --gold-400:#FFD88A; --gold-500:#F5C463; --gold-600:#E0A93F; --gold-700:#BC8722; --gold-800:#946519;

  --honey-50:#FAF0E4; --honey-100:#EFD9BF; --honey-200:#DEBB91; --honey-300:#CE9E64;
  --honey-400:#C98E54; --honey-500:#B87A3E; --honey-600:#9A6330; --honey-700:#7B4E26; --honey-800:#5C3A1D;

  --green-50:#EFF6EA; --green-100:#DBEBCF; --green-200:#C2DCAF; --green-300:#A8CD90;
  --green-400:#8FBD7A; --green-500:#72A35C; --green-600:#588945; --green-700:#436A34; --green-800:#324E27;

  --pink-50:#FFF2F3; --pink-100:#FFE3E6; --pink-200:#FFD0D5; --pink-300:#FFC0C7;
  --pink-400:#FAA2AC; --pink-500:#EE8090; --pink-600:#D8606F; --pink-700:#B0485A;

  --sand-50:#FFFBF3; --sand-100:#FFF3E0; --sand-150:#FAEAD2; --sand-200:#F4E1C4; --sand-300:#EAD2AC;
  --sand-400:#D8BB8E; --sand-500:#BF9D6E; --sand-600:#9C7B50; --sand-700:#74583A; --sand-800:#523D28;
  --sand-900:#38291A; --sand-950:#2A1D12;

  --cocoa:#3A2616;
  --berry-400:#E97A72; --berry-500:#E0544B; --berry-600:#C23D36;
  --sky-300:#A9D2E0; --sky-500:#5E9DB8;

  /* Semantic */
  --bg-page:#FBF4E7; --bg-page-warm:#F7E9CF; --surface-card:#FFFDF8; --surface-raised:#FFFFFF;
  --surface-sunken:#F5E9D5; --surface-inverse:#2F2013; --overlay-scrim:rgba(42,29,18,0.55);

  --text-strong:#2E1F12; --text-body:#4A3526; --text-muted:#8A6F56; --text-faint:#B59C7E;
  --text-on-dark:#FFF7EA; --text-on-accent:#FFFFFF; --text-link:#C75C18;

  --border-subtle:#EFE0C6; --border-default:#E3CFA9; --border-strong:#D2B585;
  --border-inverse:rgba(255,247,234,0.16);

  --accent:var(--carrot-500); --accent-hover:var(--carrot-600); --accent-active:var(--carrot-700);
  --accent-soft:var(--carrot-100); --accent-on:#FFFFFF;
  --secondary:var(--honey-500); --secondary-hover:var(--honey-600); --secondary-soft:var(--honey-50);
  --highlight:var(--gold-400); --highlight-deep:var(--gold-600); --highlight-soft:var(--gold-100);

  --success:var(--green-500); --success-soft:var(--green-100);
  --warning:var(--gold-600); --warning-soft:var(--gold-100);
  --danger:var(--berry-500); --danger-soft:#FCE3E1;
  --info:var(--sky-500); --info-soft:#E5F0F4;

  --ring:0 0 0 4px rgba(255,138,60,0.38);
  --ring-gold:0 0 0 4px rgba(255,216,138,0.55);
}

/* ---------------- SPACING & SIZING ---------------- */
:root {
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --container-sm:640px; --container-md:880px; --container-lg:1120px; --container-xl:1320px;
  --gutter:var(--space-6); --section-y:var(--space-24);
  --control-h-sm:36px; --control-h-md:44px; --control-h-lg:54px;
}

/* ---------------- EFFECTS ---------------- */
:root {
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px;
  --radius-2xl:44px; --radius-pill:999px; --radius-circle:50%;

  --shadow-xs:0 1px 2px rgba(74,53,38,0.08);
  --shadow-sm:0 2px 6px rgba(74,53,38,0.10), 0 1px 2px rgba(74,53,38,0.06);
  --shadow-md:0 6px 16px rgba(74,53,38,0.12), 0 2px 5px rgba(74,53,38,0.07);
  --shadow-lg:0 14px 34px rgba(74,53,38,0.14), 0 5px 12px rgba(74,53,38,0.08);
  --shadow-xl:0 26px 64px rgba(74,53,38,0.18), 0 10px 22px rgba(74,53,38,0.10);
  --shadow-inset:inset 0 2px 4px rgba(74,53,38,0.10);
  --glow-gold:0 0 24px rgba(255,216,138,0.55);
  --glow-carrot:0 0 20px rgba(255,138,60,0.45);
  --halo:0 8px 30px rgba(255,175,92,0.28);

  --ease-soft:cubic-bezier(0.33,0.0,0.2,1.0);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;

  --z-base:0; --z-raised:10; --z-sticky:100; --z-overlay:1000; --z-modal:1100; --z-toast:1200;
}

/* ---------------- BACK-COMPAT ALIASES ----------------
   Old "Cozy Bunny Theme" variable names map onto the new tokens
   so any remaining references keep working. */
:root {
  --bg:var(--bg-page); --surface:var(--surface-card); --surface-dark:var(--surface-inverse);
  --border:var(--border-default); --text:var(--text-strong);
  --carrot:var(--carrot-500); --carrot-dark:var(--carrot-700);
  --gold:var(--gold-400); --gold-dark:var(--gold-600);
  --honey:var(--honey-500); --honey-light:var(--honey-100);
  --cream:var(--sand-100); --cream-dark:var(--sand-200);
  --wood:var(--honey-700); --wood-dark:var(--honey-800);
  --soft-green:var(--green-500);
  --bunny-blue:var(--sky-500); --bunny-blue-dk:#3F7E96;
  --bunny-red:var(--carrot-500); --bunny-red-dk:var(--carrot-700);
  --radius:var(--radius-md); --shadow:var(--shadow-md);
}

/* ---------------- BASE ELEMENT STYLES ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-family: var(--font-sans); font-weight: var(--weight-extra); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
a:hover { color: var(--accent-active); }
strong, b { font-weight: var(--weight-bold); }
small { font-size: var(--text-sm); }
::selection { background: var(--gold-300); color: var(--text-strong); }

.wh-eyebrow {
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--honey-500);
}
.wh-display {
  font-family: var(--font-display); font-size: var(--text-display);
  line-height: var(--leading-tight); color: var(--text-strong);
}
[data-lucide] { width: 20px; height: 20px; }