/* PT Sinar Jaya Reklame - Design Tokens & Global Variables */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Theme Colors - Dark Luxury Metallic Theme */
    --bg-main: #f8fbff;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #eff6ff;
    --bg-glass: rgba(255, 255, 255, 0.86);
    --bg-glass-card: rgba(255, 255, 255, 0.92);
    --bg-glass-hover: #eef7ff;

    /* Metallic & Accent Colors */
    --accent-gold: #f59e0b;
    --accent-gold-hover: #d97706;
    --accent-gold-light: #fef3c7;
    --accent-gold-glow: rgba(245, 158, 11, 0.35);

    --accent-cyan: #06b6d4;
    --accent-cyan-glow: rgba(6, 182, 212, 0.35);

    --accent-blue: #3b82f6;
    --accent-blue-glow: rgba(59, 130, 246, 0.35);

    --accent-emerald: #10b981;

    /* Text Colors */
    --text-primary: #14213d;
    --text-secondary: #45556c;
    --text-muted: #66758d;
    --text-dim: #8c99ab;
    --text-gold: #c87800;

    /* Border & Separator Colors */
    --border-light: rgba(20, 33, 61, 0.09);
    --border-glass: rgba(20, 33, 61, 0.14);
    --border-gold: rgba(245, 158, 11, 0.4);
    --border-glow: rgba(6, 182, 212, 0.5);

    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Shadows & Glows */
    --shadow-sm: 0 2px 8px rgba(22, 55, 97, 0.08);
    --shadow-md: 0 8px 24px rgba(22, 55, 97, 0.12);
    --shadow-lg: 0 16px 40px rgba(22, 55, 97, 0.16);
    --glow-gold: 0 0 25px rgba(245, 158, 11, 0.3);
    --glow-cyan: 0 0 25px rgba(6, 182, 212, 0.3);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Motion */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Variables Toggle */
[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-card: rgba(255, 255, 255, 0.9);
    --bg-glass-hover: rgba(241, 245, 249, 0.95);

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-dim: #94a3b8;

    --border-light: rgba(0, 0, 0, 0.08);
    --border-glass: rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
}