/* =====================================================================
   variables.css
   Token desain: warna (light/dark), tipografi, spacing, radius, shadow,
   gradient, dan easing curve untuk animasi yang lebih halus dan modern.
   ===================================================================== */

:root {
    /* --- Warna: Light Mode (default) --- */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F4F5FA;
    --color-bg-elevated: #FFFFFF;
    --color-text-primary: #171A2B;
    --color-text-secondary: #5C6272;
    --color-border: #E7E8F1;
    --color-primary: #0098FD;
    --color-primary-dark: #0077CC;
    --color-primary-light: #E4F4FF;
    --color-primary-rgb: 0, 152, 253;
    --color-accent: #0072C6;
    --color-accent-dark: #005A9E;
    --color-accent-rgb: 0, 114, 198;
    --color-star: #F5B942;
    --color-success: #1B9A57;
    --color-danger: #E23F45;

    /* --- Gradient signature (dipakai sangat selektif: hero glow, CTA, stat strip) --- */
    --gradient-primary: linear-gradient(135deg, #0098FD 0%, #33B4FF 100%);
    --gradient-accent: linear-gradient(135deg, #0072C6 0%, #0098FD 100%);
    --gradient-dark: linear-gradient(180deg, #12142099 0%, #0A0E1A 65%);

    /* --- Tipografi (diperbesar agar lebih mudah dibaca, khususnya di mobile) --- */
    --font-family-base: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);
    --fs-h1: clamp(2rem, 1.65rem + 1.8vw, 2.75rem);
    --fs-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2rem);
    --fs-h3: 1.375rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.95rem;
    --fs-caption: 0.875rem;

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

    --lh-tight: 1.2;
    --lh-heading: 1.3;
    --lh-body: 1.7;

    /* --- Spacing (kelipatan 4px) --- */
    --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;
    --space-24: 96px;

    /* --- Radius --- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* --- Shadow: bertingkat, halus, dengan tint warna primer di level tinggi --- */
    --shadow-xs: 0 1px 2px rgba(23, 26, 43, 0.06);
    --shadow-sm: 0 2px 8px rgba(23, 26, 43, 0.06);
    --shadow-md: 0 8px 24px rgba(23, 26, 43, 0.08);
    --shadow-lg: 0 16px 40px rgba(23, 26, 43, 0.12);
    --shadow-primary: 0 12px 28px rgba(var(--color-primary-rgb), 0.28);
    --shadow-focus: 0 0 0 4px rgba(var(--color-primary-rgb), 0.16);
    --shadow-glow-primary: 0 10px 28px rgba(var(--color-primary-rgb), 0.32);
    --shadow-glow-accent: 0 10px 28px rgba(var(--color-accent-rgb), 0.32);

    /* --- Motion: easing khas produk modern (bukan linear/ease standar) --- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast: 180ms var(--ease-standard);
    --transition-base: 280ms var(--ease-standard);
    --transition-slow: 450ms var(--ease-out-soft);
    --transition-reveal: 700ms var(--ease-out-soft);
    --transition-bounce: 450ms var(--ease-spring);

    /* --- Warna & tipografi tambahan (border kuat, bg tersier, aksen terang, line-height) --- */
    --color-border-strong: #CDD0E2;
    --color-bg-tertiary: #EEF0F8;
    --color-accent-light: #FFD9A8;
    --lh-relaxed: 1.75;
    --gradient-hero-mesh: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-secondary)) 0%, color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-secondary)) 100%);

    /* --- Layout --- */
    --container-max: 1200px;
    --topbar-height-desktop: 80px;
    --topbar-height-mobile: 64px;
    --carousel-max-width: 980px;
}

/* --- Warna: Dark Mode --- */
[data-theme="dark"] {
    --color-bg-primary: #10121C;
    --color-bg-secondary: #191C28;
    --color-bg-elevated: #1D2030;
    --color-text-primary: #F2F3F8;
    --color-text-secondary: #9FA5B8;
    --color-border: #2A2E40;
    --color-primary: #33B4FF;
    --color-primary-dark: #0098FD;
    --color-primary-light: #123049;
    --color-primary-rgb: 51, 180, 255;
    --color-accent: #5FC4FF;
    --color-accent-dark: #33B4FF;
    --color-accent-rgb: 95, 196, 255;
    --color-star: #F5B942;
    --color-success: #3FCB7E;
    --color-danger: #F16A6F;

    --gradient-primary: linear-gradient(135deg, #33B4FF 0%, #0098FD 100%);
    --gradient-accent: linear-gradient(135deg, #5FC4FF 0%, #33B4FF 100%);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 12px 28px rgba(133, 124, 255, 0.35);
    --shadow-focus: 0 0 0 4px rgba(var(--color-primary-rgb), 0.22);
    --shadow-glow-primary: 0 10px 28px rgba(var(--color-primary-rgb), 0.4);
    --shadow-glow-accent: 0 10px 28px rgba(255, 169, 95, 0.4);

    --color-border-strong: #383D52;
    --color-bg-tertiary: #232637;
}

/* Token khusus yang SELALU gelap terlepas dari tema aktif
   (statistik strip & footer, sesuai keputusan desain) */
:root {
    --color-always-dark: #0A0E1A;
    --color-always-dark-elevated: #131725;
    --color-always-dark-text: #F2F3F8;
    --color-always-dark-text-secondary: #9BA1B5;
    --color-always-dark-border: rgba(255, 255, 255, 0.09);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-reveal: 0ms;
        --transition-bounce: 0ms;
    }
}