/* ================================================================
   SIAPNIKAH — DESIGN TOKENS v2
   Framer-style design system
   ================================================================ */

:root {
  /* ── Brand Palette ─────────────────────────────────────────── */
  --sn-green-950: #0d2b1e;
  --sn-green-900: #1a3d2b;
  --sn-green-800: #2D6A4F;
  --sn-green-700: #357a5c;
  --sn-green-600: #3d8a68;
  --sn-green-500: #52a87f;
  --sn-green-400: #6dbf97;
  --sn-green-300: #95D5B2;
  --sn-green-200: #b8e6cc;
  --sn-green-100: #d8f3e3;
  --sn-green-50:  #edfaf3;

  --sn-cream-950: #2a2317;
  --sn-cream-800: #6b5d3f;
  --sn-cream-600: #a08960;
  --sn-cream-200: #ede5cc;
  --sn-cream-100: #f4eed9;
  --sn-cream-50:  #F8F4E3;

  --sn-orange-800: #7c2d12;
  --sn-orange-600: #b84a27;
  --sn-orange-500: #E76F51;
  --sn-orange-400: #ec8a70;
  --sn-orange-100: #fde8de;
  --sn-orange-50:  #fef4f0;

  --sn-navy-950: #0a0a14;
  --sn-navy-900: #1B1B2F;
  --sn-navy-700: #2d2d45;
  --sn-navy-600: #3a3a58;
  --sn-navy-400: #6b6b8a;
  --sn-navy-200: #b0b0c8;
  --sn-navy-100: #e0e0eb;

  /* ── Semantic ──────────────────────────────────────────────── */
  --color-primary:    var(--sn-green-800);
  --color-primary-h:  var(--sn-green-700);
  --color-primary-s:  var(--sn-green-50);
  --color-accent:     var(--sn-orange-500);
  --color-accent-h:   var(--sn-orange-600);
  --color-bg:         #ffffff;
  --color-bg-2:       #fafaf9;
  --color-bg-cream:   var(--sn-cream-50);
  --color-bg-dark:    var(--sn-navy-900);
  --color-text:       var(--sn-navy-900);
  --color-text-2:     var(--sn-navy-400);
  --color-text-3:     var(--sn-navy-200);
  --color-border:     rgba(0,0,0,0.08);
  --color-border-2:   rgba(0,0,0,0.14);

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.70rem;
  --text-sm:   0.825rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;
  --text-6xl:  4rem;

  /* ── Spacing ────────────────────────────────────────────────── */
  --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;

  /* ── Radius ─────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl:  0 24px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07);
  --shadow-green: 0 8px 32px rgba(45,106,79,0.24);
  --shadow-orange: 0 8px 32px rgba(231,111,81,0.30);

  /* ── Easing (Framer-style springs) ──────────────────────────── */
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Duration ────────────────────────────────────────────────── */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-mid:    400ms;
  --dur-slow:   600ms;
  --dur-xslow:  900ms;

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-w:      1160px;
  --max-w-text: 680px;
  --nav-h:      68px;
  --pad-x:      clamp(1rem, 4vw, 2rem);
}