/* ============================================================
   DevGrid — Design Tokens
   Palette: near-black charcoal + terminal amber accent.
   Typeface: monospace for display/headings (ties to the code
   identity of the product), system sans for body/UI text.
   ============================================================ */

:root {
    /* --- Light mode (default) --- */
    --bg-primary: #fbfaf7;
    --bg-secondary: #f2f0ea;
    --surface: #ffffff;
    --surface-hover: #f5f3ee;
    --border: #e1ded4;
    --border-strong: #cdc9bb;
    --text-primary: #1c1b18;
    --text-secondary: #6b6a62;
    --text-tertiary: #9c9a8f;

    --accent: #b36b1e;
    --accent-hover: #96591a;
    --accent-soft: #f4e3cd;
    --accent-contrast: #ffffff;

    --success: #2f8f5b;
    --success-soft: #dcf1e6;
    --danger: #c23b3b;
    --danger-soft: #f8dede;
    --info: #2f7fb3;
    --info-soft: #dcedf6;

    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --font-display: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

    --shadow-1: 0 1px 2px rgba(20, 18, 12, 0.06);
    --shadow-2: 0 4px 12px rgba(20, 18, 12, 0.08);
    --shadow-3: 0 12px 32px rgba(20, 18, 12, 0.12);
    --glow-accent: 0 0 0 4px rgba(179, 107, 30, 0.12);

    --header-height: 60px;
    --sidebar-width: 240px;
    --max-content: 1180px;

    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
    --bg-primary: #0a0c10;
    --bg-secondary: #10131a;
    --surface: #141821;
    --surface-hover: #1a1f2a;
    --border: #242a35;
    --border-strong: #323a48;
    --text-primary: #eef0f3;
    --text-secondary: #8b93a1;
    --text-tertiary: #5c6473;

    --accent: #e8a33d;
    --accent-hover: #f2b34f;
    --accent-soft: #2c2210;
    --accent-contrast: #14100a;

    --success: #4cc98a;
    --success-soft: #103322;
    --danger: #ea6767;
    --danger-soft: #3a1717;
    --info: #5cb3e0;
    --info-soft: #10222e;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.5);
    --glow-accent: 0 0 0 4px rgba(232, 163, 61, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}