/* ═══════════════════════════════════════════════
   MAK PIK — Design Tokens (CSS Custom Properties)
   Warna diambil dari identitas kemasan produk asli
   ═══════════════════════════════════════════════ */

:root {
  /* ═══ BRAND COLORS — dari kemasan asli ═══ */
  --color-maroon:        #5A1220;
  --color-maroon-dark:   #3D0C16;
  --color-maroon-light:  #7A2035;
  --color-maroon-rgb:    90, 18, 32;

  --color-gold:          #B8863C;
  --color-gold-dark:     #96692A;
  --color-gold-light:    #D4A85A;

  --color-cream:         #E7DAC0;
  --color-cream-dark:    #D4C5A5;
  --color-cream-light:   #F5F0E3;

  --color-brown:         #7A3B1D;
  --color-brown-dark:    #5C2A13;
  --color-brown-light:   #9A5A3D;

  /* ═══ SEMANTIC COLORS ═══ */
  --color-bg-primary:    #F5F0E3;
  --color-bg-dark:       #2A0F14;
  --color-bg-dark-rgb:   42, 15, 20;
  --color-text-primary:  #2A0F14;
  --color-text-light:    #F5F0E3;
  --color-text-muted:    #7A6B5A;
  --color-cta:           #B8863C;
  --color-cta-hover:     #D4A85A;
  --color-border:        #D4C5A5;
  --color-success:       #3D7A45;
  --color-whatsapp:      #25D366;

  /* ═══ TYPOGRAPHY ═══ */
  --font-display:        'Fraunces', serif;
  --font-body:           'Nunito Sans', sans-serif;

  --fs-hero:             clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1:               clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2:               clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
  --fs-h3:               clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --fs-body:             clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  --fs-body-lg:          clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem);
  --fs-small:            clamp(0.875rem, 0.4vw + 0.75rem, 1rem);
  --fs-caption:          0.875rem;

  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;

  --lh-tight:            1.2;
  --lh-normal:           1.6;
  --lh-relaxed:          1.8;

  /* ═══ SPACING (8px base) ═══ */
  --space-2xs:           0.125rem;  /* 2px  */
  --space-xs:            0.25rem;   /* 4px  */
  --space-sm:            0.5rem;    /* 8px  */
  --space-md:            1rem;      /* 16px */
  --space-lg:            1.5rem;    /* 24px */
  --space-xl:            2rem;      /* 32px */
  --space-2xl:           3rem;      /* 48px */
  --space-3xl:           4rem;      /* 64px */
  --space-4xl:           6rem;      /* 96px */
  --space-5xl:           8rem;      /* 128px */

  /* ═══ LAYOUT ═══ */
  --header-height:       72px;
  --header-height-mobile: 62px;
  --container-max:       1280px;
  --container-narrow:    900px;
  --container-padding:   clamp(1rem, 3.5vw, 2.5rem);
  --section-padding:     clamp(2rem, 5vw, 4rem);

  /* ═══ BORDER & RADIUS ═══ */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-full:         9999px;

  /* ═══ SHADOW ═══ */
  --shadow-sm:           0 1px 3px rgba(42, 15, 20, 0.08);
  --shadow-md:           0 4px 12px rgba(42, 15, 20, 0.12);
  --shadow-lg:           0 8px 24px rgba(42, 15, 20, 0.16);
  --shadow-xl:           0 12px 48px rgba(42, 15, 20, 0.20);
  --shadow-gold:         0 4px 20px rgba(184, 134, 60, 0.25);

  /* ═══ TRANSITION ═══ */
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;
  --transition-spring:   400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══ Z-INDEX SCALE ═══ */
  --z-base:              0;
  --z-dropdown:          10;
  --z-sticky:            20;
  --z-overlay:           40;
  --z-modal:             100;
  --z-toast:             1000;
}