/* ═══════════════════════════════════════════════════════════════
   BCC DESIGN SYSTEM — Figma Tokens (BCC-To-Dev)
   Source: Figma file QR76d5CwHqKRmzJk6reMSu
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ── */
    --bcc-primary: #0582A6;
    --bcc-primary-hover: #0681A8;
    --bcc-primary-dark: #046D8C;
    --bcc-primary-darkest: #035A73;
    --bcc-primary-light: #E6F5F9;
    --bcc-primary-8: rgba(5, 130, 166, 0.08);
    --bcc-primary-12: rgba(5, 130, 166, 0.12);
    --bcc-primary-20: rgba(5, 130, 166, 0.20);

    /* ── Neutral ── */
    --bcc-white: #FFFFFF;
    --bcc-gray-50: #F9FAFB;
    --bcc-gray-100: #F3F4F6;
    --bcc-gray-150: #F0F4F8;
    --bcc-gray-200: #E5E7EB;
    --bcc-gray-300: #D1D5DB;
    --bcc-gray-400: #9CA3AF;
    --bcc-gray-500: #6B7280;
    --bcc-gray-600: #4B5563;
    --bcc-gray-700: #374151;
    --bcc-gray-800: #1F2937;
    --bcc-gray-900: #111827;
    --bcc-black: #030712;

    /* ── Semantic ── */
    --bcc-success: #16A34A;
    --bcc-success-light: rgba(22, 163, 74, 0.10);
    --bcc-error: #EF4444;
    --bcc-error-light: rgba(239, 68, 68, 0.10);
    --bcc-warning: #F59E0B;
    --bcc-warning-light: rgba(245, 158, 11, 0.10);
    --bcc-info: #3B82F6;
    --bcc-info-light: rgba(59, 130, 246, 0.10);

    /* ── Backgrounds ── */
    --bcc-bg-page: #F3F4F6;
    --bcc-bg-card: #FFFFFF;
    --bcc-bg-section: #F9FAFB;
    --bcc-bg-hover: rgba(0, 0, 0, 0.02);

    /* ── Text ── */
    --bcc-text: #1A1A2E;
    --bcc-text-secondary: #707171;
    --bcc-text-tertiary: #99A1AF;

    /* ── Borders ── */
    --bcc-border: #6A7282;
    --bcc-border-light: #E5E7EB;
    --bcc-border-card: rgba(0, 0, 0, 0.06);

    /* ── Typography (Inter only) ── */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-md: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 28px;

    /* ── Spacing ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;

    /* ── Radius ── */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-2xl: 16px;
    --r-3xl: 20px;
    --r-pill: 9999px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
    --shadow-focus: 0 0 0 3px var(--bcc-primary-20);
    --shadow-primary: 0 4px 14px rgba(5, 130, 166, 0.25);

    /* ── Motion ── */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* ── Sizes ── */
    --btn-height: 48px;
    --input-height: 48px;
    --header-height: 60px;
    --bottom-nav-height: 64px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 0px;

    /* ── Gradients ── */
    --gradient-hero: linear-gradient(135deg, #0582A6 0%, #046D8C 100%);
    --gradient-card: linear-gradient(135deg, #0582A6, #046D8C, #035A73);
    --gradient-dark: linear-gradient(135deg, #1A1A2E 0%, #0D1B2A 100%);
}