/* ==========================================================================
   TOKENS.CSS — Variabel Desain LKP Fath Eshan
   Mobile-first: nilai dasar untuk layar 390 px, disesuaikan di >= 768 px & >= 1024 px
   ========================================================================== */

:root {
  /* --- Palet Brand & Permukaan --- */
  --brand-red: #B91C1C;
  --brand-red-hover: #991B1B;
  --brand-red-active: #7F1D1D;
  --brand-red-tint: #FEE2E2;
  --brand-red-soft: #FEF2F2;
  --brand-red-border: #FECACA;

  --brand-black: #111827;
  --brand-black-soft: #1F2937;

  --cream: #FFFBEB;
  --cream-warm: #FEF3C7;
  --slate-soft: #F8FAFC;
  --white: #FFFFFF;

  --whatsapp: #15803D;
  --whatsapp-hover: #166534;
  --whatsapp-soft: #DCFCE7;

  --status-open: #15803D;
  --status-closed: #B91C1C;
  --star-yellow: #FACC15;
  --quote-pink: #FCA5A5;

  /* --- Teks & Garis (rasio kontras >= 4.5:1 di putih, krem, dan slate) --- */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-inverse: #FFFFFF;
  --text-footer: #D1D5DB;

  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --border-strong: #111827;
  --border-footer: rgba(255, 255, 255, 0.14);

  /* --- Tipografi --- */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Skala Huruf Mobile (390 px) */
  --fs-h1: 1.875rem;       /* 30 px */
  --fs-h2: 1.5rem;         /* 24 px */
  --fs-h3: 1.125rem;       /* 18 px */
  --fs-body-lg: 1rem;      /* 16 px */
  --fs-body: 0.9375rem;    /* 15 px */
  --fs-caption: 0.8125rem; /* 13 px */

  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  /* --- Spasi Sistem Grid 8 px --- */
  --space-1: 0.25rem;   /* 4 px */
  --space-2: 0.5rem;    /* 8 px */
  --space-3: 0.75rem;   /* 12 px */
  --space-4: 1rem;      /* 16 px */
  --space-5: 1.25rem;   /* 20 px */
  --space-6: 1.5rem;    /* 24 px */
  --space-8: 2rem;      /* 32 px */
  --space-10: 2.5rem;   /* 40 px */
  --space-12: 3rem;     /* 48 px */
  --space-16: 4rem;     /* 64 px */
  --space-20: 5rem;     /* 80 px */

  /* --- Tata Letak & Ukuran --- */
  --container-max: 1200px;
  --container-pad: 1rem;       /* 16 px di mobile */
  --section-py: 3rem;          /* 48 px di mobile */
  --nav-height: 64px;
  --nav-height-scrolled: 58px;

  /* --- Radius Sudut --- */
  --radius-btn: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-hero: 24px;
  --radius-pill: 9999px;

  /* --- Bayangan Lembut Berlapis --- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm: 0 2px 6px -1px rgba(17, 24, 39, 0.06), 0 1px 3px -1px rgba(17, 24, 39, 0.04);
  --shadow-card: 0 4px 14px -2px rgba(17, 24, 39, 0.06), 0 2px 5px -2px rgba(17, 24, 39, 0.04);
  --shadow-card-hover: 0 18px 34px -8px rgba(17, 24, 39, 0.12), 0 6px 12px -4px rgba(17, 24, 39, 0.06);
  --shadow-float: 0 14px 30px -6px rgba(17, 24, 39, 0.16), 0 4px 10px -2px rgba(17, 24, 39, 0.08);
  --shadow-red: 0 10px 22px -6px rgba(185, 28, 28, 0.4);
  --shadow-wa: 0 10px 22px -6px rgba(21, 128, 61, 0.4);

  /* --- Kurva & Durasi Animasi --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.25s;
  --duration-base: 0.45s;
  --duration-slow: 0.75s;

  /* --- Lapisan Z-Index --- */
  --z-base: 1;
  --z-floating: 90;
  --z-navbar: 100;
  --z-drawer-backdrop: 115;
  --z-drawer: 120;
  --z-progress: 130;
  --z-preloader: 200;
}

/* --- Tablet (>= 768 px) --- */
@media (min-width: 768px) {
  :root {
    --fs-h1: 2.375rem;      /* 38 px */
    --fs-h2: 1.75rem;       /* 28 px */
    --fs-h3: 1.1875rem;     /* 19 px */
    --fs-body-lg: 1.0625rem;
    --fs-body: 1rem;        /* 16 px */
    --fs-caption: 0.875rem; /* 14 px */

    --container-pad: 1.5rem; /* 24 px */
    --section-py: 4rem;      /* 64 px */
  }
}

/* --- Desktop (>= 1024 px) --- */
@media (min-width: 1024px) {
  :root {
    --fs-h1: 2.75rem;       /* 44 px */
    --fs-h2: 2rem;          /* 32 px */
    --fs-h3: 1.25rem;       /* 20 px */
    --fs-body-lg: 1.125rem; /* 18 px */
    --fs-body: 1rem;        /* 16 px */
    --fs-caption: 0.875rem; /* 14 px */

    --container-pad: 2rem;   /* 32 px */
    --section-py: 5rem;      /* 80 px */
    --nav-height: 72px;
    --nav-height-scrolled: 64px;
  }
}