/* =========================================================
   Peribahasa — Design Tokens
   Single source of truth for color, type, spacing, motion.
   ========================================================= */

:root {
    /* ---------- Accent: Coral (default) ---------- */
    --accent-50:  #FFF1EE;
    --accent-100: #FFE0DA;
    --accent-200: #FFC4B8;
    --accent-300: #FFA28F;
    --accent-400: #FF7A66;
    --accent-500: #FF5A5F;
    --accent-600: #E84A4F;
    --accent-700: #C13A3F;
    --accent-800: #922A2E;
    --accent-900: #5E1B1E;

    /* ---------- Card accent palette (rotates per card) ---------- */
    --c1: #FF5A5F;   /* coral */
    --c2: #5B5BD6;   /* indigo */
    --c3: #10B981;   /* emerald */
    --c4: #F59E0B;   /* amber */
    --c5: #EC4899;   /* pink */
    --c6: #0EA5E9;   /* sky */

    /* ---------- Spacing (8-pt grid) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* ---------- Type ---------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---------- Radii ---------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 999px;

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 150ms;
    --t-base: 250ms;
    --t-slow: 400ms;

    /* ---------- Layout ---------- */
    --container: 1240px;
    --container-narrow: 880px;
    --container-wide: 1400px;

    /* ---------- Shadows ---------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 16px -2px rgba(15, 23, 42, 0.08), 0 3px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 32px 80px -20px rgba(15, 23, 42, 0.25);
    --shadow-glow: 0 0 0 6px var(--accent-100);
}

/* ====== Accent: Coral (default) ====== */
[data-accent="coral"] {
    --accent: #FF5A5F;
    --accent-hover: #E84A4F;
    --accent-soft: #FFE0DA;
    --accent-contrast: #FFFFFF;
    --gradient: linear-gradient(135deg, #FF5A5F 0%, #FF8A47 100%);
}

/* ====== Accent: Indigo ====== */
[data-accent="indigo"] {
    --accent: #5B5BD6;
    --accent-hover: #4F46E5;
    --accent-soft: #E5E4FA;
    --accent-contrast: #FFFFFF;
    --gradient: linear-gradient(135deg, #5B5BD6 0%, #8B5CF6 100%);
}

/* ====== Accent: Emerald ====== */
[data-accent="emerald"] {
    --accent: #10B981;
    --accent-hover: #059669;
    --accent-soft: #D1FAE5;
    --accent-contrast: #FFFFFF;
    --gradient: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
}

/* ====== Mode: Light (default) ====== */
[data-mode="light"] {
    --bg: #FFFAF6;
    --bg-soft: #FFF4EC;
    --bg-muted: #FCE9DE;
    --bg-elev: #FFFFFF;
    --bg-invert: #1A1A2E;

    --surface: #FFFFFF;
    --surface-2: #FFF8F0;
    --surface-3: #FFEFDF;
    --border: #F2DCC8;
    --border-strong: #E5C2A2;

    --text: #1A1A2E;
    --text-muted: #5B5A6E;
    --text-subtle: #8A8799;
    --text-on-invert: #FFF8F0;

    --header-bg: rgba(255, 250, 246, 0.78);
    --header-border: rgba(26, 26, 46, 0.08);
    --code-bg: #FFEFDF;

    --card-grad: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%);
    --hero-grad: linear-gradient(180deg, #FFE4DA 0%, #FFF4EC 100%);
    --ring: rgba(255, 90, 95, 0.35);

    --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.06), 0 1px 3px rgba(26, 26, 46, 0.04);
    --shadow-md: 0 6px 16px -2px rgba(26, 26, 46, 0.08), 0 3px 6px -2px rgba(26, 26, 46, 0.04);
    --shadow-lg: 0 24px 48px -12px rgba(26, 26, 46, 0.18), 0 8px 16px -4px rgba(26, 26, 46, 0.08);
    --shadow-xl: 0 32px 80px -20px rgba(26, 26, 46, 0.25);
}

/* ====== Mode: Dark ====== */
[data-mode="dark"] {
    --bg: #0F0F1A;
    --bg-soft: #16162A;
    --bg-muted: #1E1E3A;
    --bg-elev: #1A1A2E;
    --bg-invert: #FFF8F0;

    --surface: #1A1A2E;
    --surface-2: #22223D;
    --surface-3: #2A2A4A;
    --border: #2D2D4F;
    --border-strong: #3F3F66;

    --text: #F4F0FF;
    --text-muted: #B4B0C7;
    --text-subtle: #7C7896;
    --text-on-invert: #1A1A2E;

    --header-bg: rgba(15, 15, 26, 0.78);
    --header-border: rgba(255, 255, 255, 0.06);
    --code-bg: #22223D;

    --card-grad: linear-gradient(180deg, #1A1A2E 0%, #16162A 100%);
    --hero-grad: linear-gradient(180deg, #1A1A2E 0%, #22223D 100%);
    --ring: rgba(255, 90, 95, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 32px 80px -20px rgba(0, 0, 0, 0.7);

    --accent-soft: rgba(255, 90, 95, 0.18);
}

/* Dark mode: bump accent soft opacity for indigo/emerald (handled via per-accent vars) */
[data-mode="dark"][data-accent="indigo"] {
    --accent-soft: rgba(91, 91, 214, 0.18);
}
[data-mode="dark"][data-accent="emerald"] {
    --accent-soft: rgba(16, 185, 129, 0.18);
}

/* ====== Auto: follow system on first visit ====== */
@media (prefers-color-scheme: dark) {
    html:not([data-mode]) {
        color-scheme: dark;
        --bg: #0F0F1A;
        --bg-soft: #16162A;
        --bg-muted: #1E1E3A;
        --bg-elev: #1A1A2E;
        --bg-invert: #FFF8F0;
        --surface: #1A1A2E;
        --surface-2: #22223D;
        --surface-3: #2A2A4A;
        --border: #2D2D4F;
        --border-strong: #3F3F66;
        --text: #F4F0FF;
        --text-muted: #B4B0C7;
        --text-subtle: #7C7896;
        --text-on-invert: #1A1A2E;
        --header-bg: rgba(15, 15, 26, 0.78);
        --header-border: rgba(255, 255, 255, 0.06);
        --code-bg: #22223D;
        --card-grad: linear-gradient(180deg, #1A1A2E 0%, #16162A 100%);
        --hero-grad: linear-gradient(180deg, #1A1A2E 0%, #22223D 100%);
        --ring: rgba(255, 90, 95, 0.5);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 32px 80px -20px rgba(0, 0, 0, 0.7);
    }
}