/* ============================================
   CSS DESIGN TOKENS
   Based on Webapp 2 (Urbanism Map) palette
   ============================================ */

:root {
    /* Core palette from Webapp 2 */
    --bg: #F9F7F0;              /* Warm off-white - page background */
    --surface: #FFFFFF;          /* White - cards, modals */
    --surface-dark: #BDBCB8;     /* Light grey - borders */
    --primary: #1C1C1A;          /* Deep charcoal - text */
    --body-text: #1C1C1A;        /* Same as primary */
    --muted: #8A8986;            /* Mid grey - secondary text */
    --accent: #FFE900;           /* Bright yellow - CTAs, highlights */
    --deep-accent: #ECC232;      /* Golden yellow - hover states */

    /* Status badges */
    --status-success: #16A34A;   /* Green - "Actualizat" */
    --status-warning: #EAB308;   /* Amber - "Nou" */
    --status-info: #6B7280;      /* Grey - "In curand" */

    /* Typography */
    --font-heading: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Layout */
    --header-height: 64px;
    --container-max: 1200px;
    --container-padding: 1.5rem;
}

@media (max-width: 768px) {
    :root {
        --header-height: 56px;
        --container-padding: 1rem;
    }
}