/*
 * EP Team — Design Tokens
 * Source of truth: Documentation/EP Team Brand Book 1.1 (3).pdf
 * Update only here. All other CSS must reference these via var().
 */
:root {
    /* ── Brand colors (Brand Book 1.1) ──────────────────────────── */
    --color-brand-navy:       #30355a;
    --color-brand-white:      #f6f6f6;
    --color-brand-blue:       #5480c0;
    --color-brand-green:      #71b294;
    --color-brand-yellow:     #f4e949;
    --color-brand-red:        #d16a5c;

    /* ── Semantic mapping (light theme) ─────────────────────────── */
    --color-primary:          var(--color-brand-blue);
    --color-primary-rgb:      84, 128, 192;
    --color-primary-hover:    #4670a8;
    --color-on-primary:       #ffffff;

    --color-success:          var(--color-brand-green);
    --color-success-rgb:      113, 178, 148;
    --color-warning:          var(--color-brand-yellow);
    --color-warning-rgb:      244, 233, 73;
    --color-warning-text:     #5a4a00;
    --color-danger:           var(--color-brand-red);
    --color-danger-rgb:       209, 106, 92;
    --color-info:             var(--color-brand-blue);
    --color-info-rgb:         84, 128, 192;

    --color-bg:               #111827;
    --color-bg-elevated:      #1e2640;
    --color-bg-subtle:        #252d4a;
    --color-surface-dark:     #0d1117;

    --color-text:             #e8ecf4;
    --color-text-muted:       #c4cde0;
    --color-text-on-dark:     var(--color-brand-white);

    --color-border:           #2d3655;
    --color-border-strong:    #3a4470;
    --color-border-input:     #4a5280;

    --color-focus-ring:       rgba(84, 128, 192, 0.35);

    /* Extended accent text colors (used in admin dashboard tiles) */
    --color-accent-green-text:  #065f46;
    --color-accent-amber-text:  #7a5200;
    --color-accent-pink-text:   #9d174d;
    --color-accent-orange-text: #9a3412;
    --color-accent-yellow-text: #854d0e;
    --color-accent-red-text:    #991b1b;

    /* Status / system colors */
    --color-offline:            #ff9800;
    --color-offline-dark:       #f57c00;
    --color-badge-awaiting:     #e67e22;
    --color-w3w:                #e11f26;

    /* Extended text */
    --color-text-on-dark-muted: #d1d1d1;
    --color-text-on-dark-sub:   #ffffff;

    /* Calendar legend */
    --color-legend-green:       #4caf50;
    --color-legend-amber:       #ffc107;
    --color-legend-blue:        #2196f3;

    /* Availability (semantic) */
    --color-available:        var(--color-brand-green);
    --color-not-available:    var(--color-brand-red);
    --color-maybe:            var(--color-brand-yellow);

    /* ── Bootstrap overrides (derived from tokens above) ────────── */
    --bs-primary:             #5480c0;
    --bs-primary-rgb:         84, 128, 192;
    --bs-success:             #71b294;
    --bs-success-rgb:         113, 178, 148;
    --bs-danger:              #d16a5c;
    --bs-danger-rgb:          209, 106, 92;
    --bs-warning:             #f4e949;
    --bs-warning-rgb:         244, 233, 73;
    --bs-body-bg:             #111827;
    --bs-body-color:          #f6f6f6;
    --bs-border-color:        #2d3655;
    --bs-card-bg:             #1e2640;
    --bs-card-color:          #f6f6f6;
    --bs-card-border-color:   #2d3655;
    --bs-form-select-bg-img:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f6f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* ── Spacing (4-px scale) ───────────────────────────────────── */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Border radius ──────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* ── Elevation / shadows ────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 10px 30px rgba(18, 25, 62, 0.12);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14);

    /* ── Typography ─────────────────────────────────────────────── */
    --font-heading: 'Segoe UI Semibold', 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-body:    'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --text-xs:      12px;
    --text-sm:      13px;
    --text-base:    15px;
    --text-md:      17px;
    --text-lg:      20px;
    --text-xl:      22px;
    --text-2xl:     28px;
    --text-3xl:     34px;
    --text-display: 60px;

    --leading-tight:  1.21;
    --leading-normal: 1.45;

    /* ── Z-index scale ──────────────────────────────────────────── */
    --z-base:    0;
    --z-sticky:  100;
    --z-overlay: 1000;
    --z-modal:   1050;
    --z-popover: 1100;
    --z-toast:   1200;
}

/* ── Dark theme override ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:           var(--color-brand-navy);
        --color-bg-elevated:  #3a3f6a;
        --color-bg-subtle:    #1f2341;
        --color-surface-dark: #15182d;

        --color-text:         var(--color-brand-white);
        --color-text-muted:   #9ca3af;

        --color-border:       #3a3f6a;
        --color-border-strong: #4a527a;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.60);
        --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.70);
    }
}

[data-theme="dark"] {
    --color-bg:           var(--color-brand-navy);
    --color-bg-elevated:  #3a3f6a;
    --color-bg-subtle:    #1f2341;
    --color-surface-dark: #15182d;

    --color-text:         var(--color-brand-white);
    --color-text-muted:   #9ca3af;

    --color-border:       #3a3f6a;
    --color-border-strong: #4a527a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.60);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.70);
}