/* ═══════════════════════════════════════════════════════════════════
   theme.css — Single source of truth for all design tokens
   Change this file to re-skin the entire app
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* === CORE PALETTE === */
    --black: #0a0a0a;
    --white: #f5f5f0;
    --gray: #888;
    --gray-dark: #333;
    --gray-light: #e0e0d8;
    --red: #ff2d2d;
    --green: #00c853;

    /* === SEMANTIC COLORS === */
    --color-bg: var(--black);
    --color-bg-surface: #111;
    --color-bg-input: #1a1a1a;
    --color-text: var(--white);
    --color-text-secondary: var(--gray);
    --color-text-muted: #555;
    --color-border: var(--gray-dark);
    --color-border-focus: var(--white);
    --color-accent: var(--red);
    --color-success: var(--green);

    /* === TYPOGRAPHY === */
    --font-display: 'Bebas Neue', cursive;
    --font-body: 'Space Mono', monospace;
    --font-vn: 'Be Vietnam Pro', sans-serif;

    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-lg: 1.1rem;
    --text-xl: 1.4rem;
    --text-2xl: 2rem;
    --text-3xl: clamp(2.5rem, 8vw, 4.5rem);

    --leading-tight: 1.1;
    --leading-normal: 1.7;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.12em;

    /* === SPACING === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* === BORDERS === */
    --border-width: 2px;
    --radius-sm: 2px;
    --radius-md: 4px;

    /* === TRANSITIONS === */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /* === SHADOWS (brutalist) === */
    --shadow-brutal: 4px 4px 0px var(--white);
    --shadow-brutal-sm: 2px 2px 0px var(--white);
    --shadow-brutal-hover: 2px 2px 0px var(--black);

    /* === Z-INDEX === */
    --z-grain: 9999;
    --z-toast: 100;
}