/* ========================================
   BBL Plan-Check — Area Management Platform
   Design Tokens
   Swiss Federal Design System
   ======================================== */

:root {
    /* Primary Colors (Official Swiss Federal CD) */
    --color-venetian-red: #DC0018;
    --color-cerulean: #006699;

    /* Background Colors */
    --color-clear-day: #F2F7F9;
    --color-pattens-blue: #D8E8EF;

    /* Grayscale — 7-step neutral scale, collapsed from 10.
       Removed #000000 (unused), #D5D5D5 (near-duplicate of #CCCCCC). */
    --color-night-rider: #333333;
    --color-coal: #454545;
    --color-empress: #6B6B6B;  /* Darkened from #757575 → fixes WCAG AA on all backgrounds */
    --color-silver: #CCCCCC;
    --color-gainsboro: #E5E5E5;
    --color-smoke: #F5F5F5;
    --color-white: #FFFFFF;

    /* Semantic Colors */
    --color-primary: var(--color-cerulean);
    --color-primary-hover: #004D73;
    --color-primary-light: var(--color-clear-day);
    --color-primary-alpha-8: rgba(0, 102, 153, 0.08);
    --color-primary-alpha-12: rgba(0, 102, 153, 0.12);
    --color-swiss-red: var(--color-venetian-red);

    --color-text-primary: var(--color-night-rider);   /* #333333 — 12.6:1 on white (AAA) */
    --color-text-secondary: var(--color-empress);      /* #6B6B6B — 5.4:1 on white, 5.0:1 on bg-page (AA) */
    --color-text-inverse: var(--color-white);

    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-smoke);
    --color-bg-page: var(--color-clear-day);

    --color-border: var(--color-silver);
    --color-border-light: var(--color-gainsboro);

    --color-focus: #0066CC;                             /* 5.6:1 on white — replaces #66AFE9 (was 2.35:1, failed 3:1) */

    --color-zebra: #F4F6F9;

    /* Semantic Colors - Traffic Light Scheme (WCAG AA ≥ 4.5:1 on -light bg & with white text) */
    --color-success: #1B5E20;
    --color-success-light: #E8F5E9;
    --color-success-border: #C8E6C9;

    --color-warning: #BF360C;
    --color-warning-light: #FFF3E0;

    --color-error: #B71C1C;
    --color-error-light: #FFEBEE;
    --color-error-border: #FFCDD2;

    --color-info: #1A5276;
    --color-info-light: #D9EDF7;

    /* Typography */
    --font-family-primary: 'Frutiger Neue LT W1G', 'Frutiger LT W01', 'Frutiger', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

    /* Font Size Scale (T-shirt sizing) */
    --font-size-2xs: 0.75rem;   /* 12px - Overline labels, small metadata */
    --font-size-xs: 0.8125rem;  /* 13px - Caption, footnotes */
    --font-size-sm: 0.875rem;   /* 14px - Small text, labels */
    --font-size-base: 1rem;     /* 16px - Body text */
    --font-size-lg: 1.25rem;    /* 20px - Large body, H4 */
    --font-size-xl: 1.5rem;     /* 24px - H3 */
    --font-size-2xl: 2rem;      /* 32px - H2 */
    --font-size-3xl: 2.5rem;    /* 40px - H1 */

    /* Semantic Font Sizes */
    --font-size-caption: var(--font-size-xs);          /* 12px - Captions, hints */
    --font-size-heading-4: var(--font-size-lg);        /* 20px - Card titles */
    --font-size-heading-3: var(--font-size-xl);        /* 24px - Section headings */
    --font-size-heading-2: var(--font-size-2xl);       /* 32px - Page sections */

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

    /* Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --letter-spacing-caps: 0.04em;

    /* Spacing Scale (8px base unit) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 2.5rem;    /* 40px */
    --space-8: 3rem;      /* 48px */
    --space-10: 4rem;     /* 64px */

    /* Component-specific Spacing */
    --button-padding-y-sm: var(--space-2);        /* 8px */
    --button-padding-x-sm: var(--space-4);        /* 16px */
    --button-padding-y: var(--space-2);            /* 8px */
    --button-padding-x: var(--space-4);            /* 16px */
    --button-padding-y-lg: var(--space-3);         /* 12px */
    --button-padding-x-lg: var(--space-4);         /* 16px */

    --input-icon-offset: 2.75rem;                  /* Space for icon in inputs */

    /* Animation */
    --duration-fast: 0.1s;
    --duration-normal: 0.15s;
    --duration-medium: 0.2s;
    --duration-slow: 0.3s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Icons (Lucide) */
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;

    /* Border Radius */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-full: 50%;
    --radius-pill: 9999px;

    /* Z-Index Scale */
    --z-index-controls: 10;
    --z-index-popup: 100;
    --z-index-dropdown: 200;
    --z-index-toast: 1000;
    --z-index-modal: 1100;

    /* Control Heights */
    --control-height-sm: 2rem;       /* 32px */
    --control-height-md: 2.25rem;    /* 36px */
    --control-height-lg: 2.5rem;     /* 40px */
    --min-target-size: 2.25rem;      /* 36px — minimum accessible click/tap target */

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 3px rgba(0, 102, 204, 0.35);     /* Softer focus ring */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 10px 20px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

    /* Overlays */
    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-dark: rgba(0, 0, 0, 0.6);
    --overlay-backdrop: rgba(0, 0, 0, 0.9);

    /* Semi-transparent whites (glass/frosted surfaces) — 5-step scale.
       Collapsed from 8: merged 15+30→20, 80+85→80, 90+92→90. */
    --color-white-alpha-20: rgba(255, 255, 255, 0.20);
    --color-white-alpha-50: rgba(255, 255, 255, 0.50);
    --color-white-alpha-70: rgba(255, 255, 255, 0.70);
    --color-white-alpha-80: rgba(255, 255, 255, 0.80);
    --color-white-alpha-90: rgba(255, 255, 255, 0.90);

    /* Semi-transparent blacks (borders, overlays) */
    --color-black-alpha-3: rgba(0, 0, 0, 0.03);
    --color-black-alpha-8: rgba(0, 0, 0, 0.08);
    --color-black-alpha-15: rgba(0, 0, 0, 0.15);

    /* Canvas Labels */
    --color-label-bg: var(--color-white-alpha-80);

    /* Video Player — gradient inlined at point of use (single reference) */

    /* Card overlay gradient */
    --overlay-card: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);

    /* Chart accent colors (SIA area types) */
    --color-chart-red: #E57373;
    --color-chart-orange: #FFB74D;
    --color-chart-yellow: #FFF176;
    --color-chart-blue: #64B5F6;

    /* Firework celebration colors — 3-color palette (was 6).
       Removed green (→ teal), purple (→ --color-primary), amber (→ gold). */
    --color-firework-gold: #FFD700;
    --color-firework-coral: #FF6B6B;
    --color-firework-teal: #4ECDC4;
}