/* ═══════════════════════════════════════
   DESIGN SYSTEM — JOOSTA
   ═══════════════════════════════════════ */

:root {
  --ink-900: #0e0d0c;
  --ink-800: #1c1a17;
  --ink-700: #2e2b25;
  --ink-600: #4a4640;
  --ink-500: #706a61;
  --ink-400: #9e9790;
  --ink-300: #c4bfb8;
  --ink-200: #ded9d3;
  --ink-100: #f0ede9;
  --ink-50: #f9f7f5;

  --amber-900: #3d1f00;
  --amber-800: #6b3800;
  --amber-700: #944f00;
  --amber-600: #c06b00;
  --amber-500: #e6840a;
  --amber-400: #f5a030;
  --amber-300: #fbbc6a;
  --amber-200: #fdd8a5;
  --amber-100: #fef0d9;
  --amber-50: #fffbf5;

  --teal-700: #074038;
  --teal-600: #0a6054;
  --teal-500: #0e8a79;
  --teal-400: #14b09a;
  --teal-300: #45c9b5;
  --teal-200: #93dece;
  --teal-100: #cbefe8;
  --teal-50: #f0faf8;

  --red-600: #8b1d18;
  --red-400: #d94039;
  --red-100: #fde8e7;

  --accent: var(--amber-500);
  --accent-light: var(--amber-100);
  --accent-dark: var(--amber-800);

  --surface: #ffffff;
  --surface-2: var(--ink-50);
  --surface-3: var(--ink-100);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-400);
  --text-on-accent: var(--ink-900);

  --border: var(--ink-200);
  --border-subtle: var(--ink-100);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  --shadow-sm:
    0 1px 3px rgba(14, 13, 12, 0.08), 0 1px 2px rgba(14, 13, 12, 0.04);
  --shadow-md:
    0 4px 12px rgba(14, 13, 12, 0.1), 0 2px 6px rgba(14, 13, 12, 0.06);
  --shadow-lg:
    0 12px 40px rgba(14, 13, 12, 0.12), 0 4px 16px rgba(14, 13, 12, 0.06);
  --shadow-xl:
    0 24px 64px rgba(14, 13, 12, 0.14), 0 8px 24px rgba(14, 13, 12, 0.08);

  --font: dana, system-ui, sans-serif;

  --max-w: 1160px;
  --max-w-narrow: 720px;
  --gutter: clamp(20px, 4vw, 48px);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

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

  /* Elevation */
  --elev-0: none;
  --elev-1: var(--shadow-sm);
  --elev-2: var(--shadow-md);
  --elev-3: var(--shadow-lg);
  --elev-4: var(--shadow-xl);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--amber-100);
  /* Section spacing */
  --section-py: clamp(56px, 9vw, 112px);
  --section-py-sm: clamp(36px, 6vw, 72px);

  /* Typography scale */
  --font-xs: 0.72rem;
  --font-sm: 0.82rem;
  --font-md: 0.88rem;
  --font-base: 0.95rem;
  --font-lg: 1.05rem;
  --font-xl: 1.15rem;

  --leading-tight: 1.35;
  --leading-normal: 1.7;
  --leading-relaxed: 1.8;

  /* Border system (B0–B3) */
  --border-b0: none;
  --border-b1: 1px solid var(--border-subtle);
  --border-b2: 1px solid var(--border);
  --border-b3: 2px solid var(--accent);

  /* Dark-surface borders */
  --border-on-dark: rgba(255, 255, 255, 0.10);
  --border-on-dark-hover: rgba(255, 255, 255, 0.16);

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 90;
  --z-nav: 100;
  --z-overlay: 200;

  /* Hero elevation (reserved) */
  --elev-hero: var(--shadow-xl);

  /* Button elevation */
  --elev-btn: var(--elev-1);
  --elev-btn-hover: var(--elev-2);
  --hover-lift: translateY(-1px);

  /* Cards */
  --card-pad: var(--space-6);
  --card-radius: var(--radius-lg);

}