/* =========================================
   JUJO – DESIGN TOKENS
========================================= */

:root {
  /* Brand */
  --green-950: #0f2f26;
  --green-900: #153f32;
  --green-800: #1f5946;
  --green-700: #376f5b;
  --green-200: #dce8df;
  --green-100: #edf3ee;

  --gold-700: #a77c3d;
  --gold-600: #b8904e;
  --gold-500: #c79249;
  --gold-300: #d3ab74;
  --gold-100: #f2e6d2;

  /* Neutrals */
  --ink: #10223d;
  --text: #34423b;
  --text-muted: #68746e;
  --white: #ffffff;
  --soft-white: #fbfaf7;
  --warm-white: #f6f2eb;
  --border: rgba(15, 47, 38, 0.12);

  /* Gradients */
  --gold-gradient: linear-gradient(
    135deg,
    var(--gold-300) 0%,
    var(--gold-600) 58%,
    var(--gold-700) 100%
  );

  --green-gradient: linear-gradient(
    135deg,
    var(--green-800),
    var(--green-950)
  );

  /* Typography */
  --font-main: "Manrope", Arial, sans-serif;

  --display-xl: clamp(3.5rem, 6.3vw, 6.3rem);
  --display-lg: clamp(2.8rem, 4.8vw, 4.8rem);
  --heading-md: clamp(1.8rem, 2.8vw, 2.8rem);
  --body-lg: 1.16rem;
  --body: 1rem;
  --small: 0.86rem;

  /* Layout */
  --container: 1240px;
  --page-padding: 24px;
  --section-space: clamp(88px, 10vw, 150px);

  /* Radius */
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --radius-xl: 52px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 18px 60px rgba(15, 47, 38, 0.09);
  --shadow-card: 0 24px 70px rgba(15, 47, 38, 0.11);
  --shadow-gold: 0 18px 48px rgba(184, 144, 78, 0.25);

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 300ms var(--ease-premium);
}