/**
 * ACCESS.AL Design Tokens
 *
 * Extracted from design-system.css v1.0 on 2026-05-17.
 * Single source of truth for visual language across all panels:
 * Manager, Staff, POS, Admin, and Public Menu.
 *
 * Tokens:
 *   - Colors (brand, semantic, surface)
 *   - Typography (font family, sizes, weights)
 *   - Spacing (4px grid)
 *   - Radius (rounded corners)
 *   - Shadows (elevation levels)
 *   - Transitions (motion)
 *   - Layout (sidebar, header)
 *   - Glass effects (backdrop-filter)
 *
 * Themes:
 *   - Light: [data-theme="light"]
 *   - Dark:  [data-theme="dark"]
 *
 * Load order: tokens.css BEFORE components.css.
 * Optional overrides: tokens-manager.css / tokens-staff.css after tokens.css.
 */

/* ================================================================
   CORE TOKENS (theme-independent)
   ================================================================ */
:root {
    /* ── Brand Colors ── */
    --primary: #f59e0b;
    --primary-rgb: 245, 158, 11;
    --primary-dark: #d97706;
    --primary-light: rgba(245, 158, 11, 0.12);

    --accent: #8b5cf6;
    --accent-rgb: 139, 92, 246;

    /* ── Semantic Colors ── */
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --info: #3b82f6;
    --info-rgb: 59, 130, 246;

    /* ── Navigation (derived from --primary) ── */
    --nav-active: var(--primary);
    --nav-active-bg: rgba(var(--primary-rgb), 0.12);

    /* ── Typography ── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.6875rem;   /* 11px */
    --font-size-sm: 0.8125rem;   /* 13px */
    --font-size-base: 0.875rem;  /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

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

    /* ── Border Radius ── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition-fast: 0.15s ease;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 80px;
    --header-height: 70px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --content-max-width: 960px;

    /* ── Z-Index Scale ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
}

/* ================================================================
   LIGHT THEME
   ================================================================ */
[data-theme="light"] {
    /* ── Surfaces ── */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-input: #ffffff;
    --bg-sidebar: rgba(255, 255, 255, 0.85);

    /* ── Text ── */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* ── Borders ── */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    /* ── Shadows (elevation) ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-island: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* ── Overlays & Glass ── */
    --overlay: rgba(15, 23, 42, 0.5);
    --glass: rgba(255, 255, 255, 0.8);
    --glass-strong: rgba(255, 255, 255, 0.92);
}

/* ================================================================
   DARK THEME (Pure Black — OLED optimized)
   ================================================================ */
[data-theme="dark"] {
    /* ── Surfaces ── */
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --bg-tertiary: #0a0a0a;
    --bg-card: #0d0d0d;
    --bg-hover: #151515;
    --bg-input: #0a0a0a;
    --bg-sidebar: rgba(5, 5, 5, 0.95);

    /* ── Text ── */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    /* SPRINT 2A FIX A3: contrast 2.3:1 → 4.5:1 on #000 (WCAG 1.4.3 AA pass) */
    --text-muted: #9a9aa3;
    --text-inverse: #000000;

    /* ── Borders ── */
    --border-color: #1a1a1a;
    --border-light: #121212;

    /* ── Shadows (elevation) ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.8);
    --shadow-island: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);

    /* ── Overlays & Glass ── */
    --overlay: rgba(0, 0, 0, 0.9);
    --glass: rgba(5, 5, 5, 0.95);
    --glass-strong: rgba(5, 5, 5, 0.98);
}

/* ================================================================
   ACCESSIBILITY & FOCUS
   ================================================================ */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ================================================================
   GLOBAL ACCENT & SELECTION (driven by --primary)
   ================================================================ */
input,
select,
textarea,
progress {
    accent-color: var(--primary);
}

::selection {
    background: rgba(var(--primary-rgb), 0.2);
    color: inherit;
}