/* =========================================================================
   Nexion Design System — Colors, Type, Spacing, Radius, Shadow
   ========================================================================= */

/* Fonts — Google Fonts (substituted; see README) */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color: Rose (primary brand ramp — beauty & cosmetica) ---------- */
  --forest-50:  #FCF2F5;
  --forest-100: #F7E0E7;
  --forest-200: #EDBBCC;
  --forest-300: #DC8FAA;
  --forest-400: #C76389;
  --forest-500: #AE4169;
  --forest-600: #8E2E52;
  --forest-700: #6F1F3C;
  --forest-800: #50152B;
  --forest-900: #320C1B;
  --forest-950: #1C060E;

  /* ---------- Color: Gold accent ---------- */
  --lime-300: #EDD9A0;
  --lime-400: #D9BE78;
  --lime-500: #BF9D4A;
  --lime-600: #9A7B30;
  --lime-700: #765C1F;

  /* ---------- Color: Cream neutrals ---------- */
  --cream-50:  #FAFAF7;
  --cream-100: #F4F2EC;
  --cream-200: #E8E4DB;
  --cream-300: #D6D1C4;

  /* ---------- Color: Ink (grayscale on cream) ---------- */
  --ink-900: #0B1410;
  --ink-700: #2A322E;
  --ink-500: #5B655F;
  --ink-300: #8B948E;
  --ink-100: #C7CCC8;

  /* ---------- Semantic surface ---------- */
  --bg:          var(--cream-50);
  --bg-elevated: #FFFFFF;
  --bg-dark:     var(--forest-950);
  --bg-muted:    var(--cream-100);

  /* ---------- Semantic foreground ---------- */
  --fg-1:    var(--ink-900);   /* primary text */
  --fg-2:    var(--ink-700);   /* secondary text */
  --fg-3:    var(--ink-500);   /* tertiary / meta */
  --fg-4:    var(--ink-300);   /* placeholder */
  --fg-on-dark-1: var(--cream-50);
  --fg-on-dark-2: rgba(250, 250, 247, 0.72);
  --fg-on-dark-3: rgba(250, 250, 247, 0.48);

  /* ---------- Semantic borders ---------- */
  --border-1: #E6E2D8;          /* default on cream */
  --border-2: var(--forest-100); /* subtle tint */
  --border-on-dark: var(--forest-700);

  /* ---------- Brand ---------- */
  --brand:        var(--forest-950);
  --brand-accent: var(--lime-500);
  --brand-soft:   var(--forest-50);

  /* ---------- Semantic state ---------- */
  --success: var(--lime-600);
  --success-bg: var(--forest-50);
  --warning: #E0A300;
  --warning-bg: #FFF8E1;
  --danger: #C0392B;
  --danger-bg: #FDECEA;
  --info: #2F7A58;
  --info-bg: var(--forest-50);

  /* ---------- Type: families ---------- */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---------- Type: scale (rem-based) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- Spacing (4px grid) ---------- */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-56:  56px;
  --space-80:  80px;
  --space-120: 120px;

  /* ---------- Radius ---------- */
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 1px rgba(11, 20, 16, 0.03);
  --shadow-sm: 0 1px 2px rgba(11, 20, 16, 0.04), 0 1px 1px rgba(11, 20, 16, 0.03);
  --shadow-md: 0 8px 24px -8px rgba(11, 20, 16, 0.12), 0 2px 4px rgba(11, 20, 16, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(11, 20, 16, 0.18), 0 4px 8px rgba(11, 20, 16, 0.06);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--lime-500);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   240ms;
  --dur-slow:   360ms;
  --dur-xslow:  600ms;
}

/* =========================================================================
   Semantic text styles
   ========================================================================= */

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, var(--fs-96));
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-wrap: balance;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, var(--fs-56));
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-600);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  text-wrap: pretty;
}

.p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--fg-3);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-2);
}