/* ===== DESIGN TOKENS ===== */
/* Green Area Inventory - Unified Design Token System */
/* This file must be loaded BEFORE main.css */

:root {

    /* ===== COLOR SYSTEM ===== */

    /* Grey Scale - Cold blue-grey */
    --grey-900: #2D3236;
    --grey-800: #3D4347;
    --grey-700: #4E555A;
    --grey-600: #5E666B;
    --grey-500: #6C757D;     /* WCAG AA on white */
    --grey-400: #A0A8AE;     /* Mid-light grey */
    --grey-300: #C5CCD1;
    --grey-200: #DDE2E6;
    --grey-100: #F3F5F7;
    --grey-50: #F9FAFB;

    /* Brand Colors */
    --accent-panel: #6C757D;
    --primary: #005ea8;
    --primary-red: #c00;
    --primary-red-dark: #a00;
    --white: #ffffff;

    /* Interactive Blue */
    --interactive-blue: #005ea8;
    --focus-ring: var(--interactive-blue);

    /* Status Colors */
    --status-active: #2e7d32;
    --status-active-bg: #e8f5e9;
    --status-active-text: #1b5e20;

    --status-renovation: #ef6c00;
    --status-renovation-bg: #fff3e0;
    --status-renovation-text: #e65100;

    --status-planning: #1976d2;
    --status-planning-bg: #e3f2fd;
    --status-planning-text: #0d47a1;

    --status-inactive: #6C757D;
    --status-inactive-bg: var(--grey-100);
    --status-inactive-text: #5E666B;

    --status-error: #d32f2f;
    --status-error-bg: #ffebee;
    --status-error-text: #c62828;

    --status-warning: #f57c00;
    --status-warning-bg: #fff3e0;
    --status-warning-text: #e65100;

    /* Legacy semantic aliases */
    --success-green: var(--status-active);
    --warning-orange: var(--status-renovation-text);
    --info-blue: var(--status-planning);

    /* ===== OVERLAY COLORS ===== */

    --overlay-light-10: rgba(255, 255, 255, 0.1);
    --overlay-light-20: rgba(255, 255, 255, 0.2);
    --overlay-light-30: rgba(255, 255, 255, 0.3);
    --overlay-light-50: rgba(255, 255, 255, 0.5);
    --overlay-light-70: rgba(255, 255, 255, 0.7);
    --overlay-light-90: rgba(255, 255, 255, 0.9);
    --overlay-dark-10: rgba(0, 0, 0, 0.1);
    --overlay-dark-50: rgba(0, 0, 0, 0.5);
    --overlay-dark-60: rgba(0, 0, 0, 0.6);

    /* ===== TYPOGRAPHY SYSTEM ===== */

    /* Type Scale (1.25 ratio - Major Third) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ===== SPACING SYSTEM ===== */
    /* 4px base unit scale */
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.2);

    /* ===== ICON SIZE SYSTEM ===== */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 18px;
    --icon-lg: 20px;
    --icon-xl: 24px;
    --icon-2xl: 36px;
    --icon-display: 48px;
    --icon-hero: 64px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== Z-INDEX SCALE ===== */
    --z-base: 0;
    --z-raised: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-banner: 100;
    --z-drawer: 400;
    --z-overlay: 500;
    --z-overlay-above: 501;
    --z-modal: 1000;
    --z-modal-above: 1001;
    --z-popover: 2000;
    --z-toast: 9999;
    --z-tooltip: 10000;
    --z-tooltip-above: 10001;

    /* ===== OPACITY ===== */
    --opacity-disabled: 0.4;
    --opacity-muted: 0.6;
    --opacity-subtle: 0.7;

    /* ===== LAYOUT ===== */
    --header-main-height: 90px;
    --header-detail-height: 124px;
    --footer-height: 27px;
    --header-total-height: calc(var(--header-main-height) + var(--header-detail-height));

    /* Touch Target (WCAG 2.1) */
    --touch-target-min: 44px;

    /* Smart Drawer */
    --drawer-width: 450px;
    --drawer-min-width: 300px;
    --drawer-max-width: 800px;
}