/* --- 1. VARIABLES & RESET — COASTAL TEAL PALETTE --- */
:root {
    /* Primary: dark teal — dalam, tenang, profesional */
    --color-primary: #264653;
    --color-primary-light: #2A9D8F;
    --color-primary-surface: #F1FAEE;
    --color-primary-glow: rgba(38,70,83,0.07);
    
    /* Accent: warm terracotta — hangat, eye-catching, kontras */
    --color-accent: #E76F51;
    --color-accent-hover: #D45D43;
    --color-accent-surface: #FDF2EB;
    --color-accent-glow: rgba(231,111,81,0.10);
    
    /* Text — kontras tinggi, mudah dibaca */
    --color-text: #1D2F33;
    --color-text-light: #5C7A80;
    --color-text-muted: #8AA5AA;
    
    /* Backgrounds */
    --color-bg: #FBFCF8;
    --color-bg-off: #F1FAEE;
    --color-card: #FFFFFF;
    --color-footer: #1D2F33;
    
    /* Borders & shadows */
    --color-border: #D4E5E6;
    --color-border-light: rgba(38,70,83,0.06);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.08);
    
    /* Fonts */
    --font-serif: 'Lora', Georgia, serif;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'Fira Code', monospace;
    
    /* Layout */
    --container-width: 1280px;
    --nav-height: 72px;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
}

/* --- DARK MODE (auto) --- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #A8DADC;
        --color-primary-light: #B7D7D8;
        --color-primary-surface: #1A2A2D;
        --color-primary-glow: rgba(168,218,220,0.08);
        
        --color-accent: #F4A261;
        --color-accent-hover: #E8A87C;
        --color-accent-surface: #2A2220;
        --color-accent-glow: rgba(244,162,97,0.10);
        
        --color-text: #E8EDEE;
        --color-text-light: #A8B8BA;
        --color-text-muted: #6E8083;
        
        --color-bg: #1A2A2D;
        --color-bg-off: #1D2F32;
        --color-card: #223538;
        --color-footer: #151F22;
        
        --color-border: #2A3A3D;
        --color-border-light: rgba(255,255,255,0.04);
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
        --shadow: 0 4px 12px rgba(0,0,0,0.3);
        --shadow-xl: 0 12px 32px rgba(0,0,0,0.4);
    }
}

/* --- MANUAL DARK MODE (data-theme) --- */
[data-theme="dark"] {
    --color-primary: #A8DADC;
    --color-primary-light: #B7D7D8;
    --color-primary-surface: #1A2A2D;
    --color-primary-glow: rgba(168,218,220,0.08);
    --color-accent: #F4A261;
    --color-accent-hover: #E8A87C;
    --color-accent-surface: #2A2220;
    --color-accent-glow: rgba(244,162,97,0.10);
    --color-text: #E8EDEE;
    --color-text-light: #A8B8BA;
    --color-text-muted: #6E8083;
    --color-bg: #1A2A2D;
    --color-bg-off: #1D2F32;
    --color-card: #223538;
    --color-footer: #151F22;
    --color-border: #2A3A3D;
    --color-border-light: rgba(255,255,255,0.04);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.4);
}

/* Force light mode */
[data-theme="light"] {
    --color-primary: #264653;
    --color-primary-light: #2A9D8F;
    --color-primary-surface: #F1FAEE;
    --color-primary-glow: rgba(38,70,83,0.07);
    --color-accent: #E76F51;
    --color-accent-hover: #D45D43;
    --color-accent-surface: #FDF2EB;
    --color-accent-glow: rgba(231,111,81,0.10);
    --color-text: #1D2F33;
    --color-text-light: #5C7A80;
    --color-text-muted: #8AA5AA;
    --color-bg: #FBFCF8;
    --color-bg-off: #F1FAEE;
    --color-card: #FFFFFF;
    --color-footer: #1D2F33;
    --color-border: #D4E5E6;
    --color-border-light: rgba(38,70,83,0.06);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.08);
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
h1, h2, h3, h4, h5, h6 { color: var(--color-text); }
h1 { font-size: clamp(2rem, 5vw, 4rem); }

/* --- THEME TOGGLE --- */
.theme-toggle { position: relative; overflow: hidden; transition: transform 0.3s; }
.theme-toggle:hover { transform: rotate(15deg); }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: opacity 0.3s, transform 0.4s; }
.theme-toggle .icon-sun { opacity: 0; transform: scale(0.5) rotate(-90deg); position: absolute; }
.theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0); position: relative; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); position: absolute; }