/* ============================================================
   BidManager design tokens — the single source of truth.
   Rules: components use SEMANTIC tokens only. Raw scale values
   (gray-*, blue-*) may only be referenced inside this file.
   Dark mode: [data-theme="dark"] flips semantic tokens.
   ============================================================ */

:root {
    /* --- Raw scales (do not use outside this file) --- */
    --gray-0: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    --blue-500: #2563eb;
    --blue-600: #1d4ed8;
    --blue-100: #dbeafe;
    --red-600: #dc2626;
    --red-100: #fee2e2;
    --green-600: #16a34a;
    --green-100: #dcfce7;
    --amber-600: #d97706;
    --amber-100: #fef3c7;
    --red-400: #f87171;
    --green-400: #4ade80;
    --amber-400: #fbbf24;

    /* --- Semantic: color --- */
    --surface: var(--gray-0);
    --surface-raised: var(--gray-0);
    --surface-sunken: var(--gray-50);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --accent: var(--blue-500);
    --accent-hover: var(--blue-600);
    --accent-soft: var(--blue-100);
    --on-accent: #ffffff;
    --danger: var(--red-600);
    --danger-soft: var(--red-100);
    --success: var(--green-600);
    --success-soft: var(--green-100);
    --warning: var(--amber-600);
    --warning-soft: var(--amber-100);
    --info-soft: var(--gray-100);
    --surface-inverse: var(--gray-800);
    --on-inverse: var(--gray-100);
    /* Default seed color for new estimate/work packages — matches the model
       defaults (EstimatePackage.color, WorkPackage.color_code). Read from JS
       via getComputedStyle for the create-package color picker. */
    --package-default-color: #6366f1;

    /* --- Semantic: type --- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

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

    /* --- Radius --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-2: 0 2px 8px rgba(15, 23, 42, 0.10);
    --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.14);
}

[data-theme="dark"] {
    --surface: var(--gray-900);
    --surface-raised: var(--gray-800);
    --surface-sunken: var(--gray-950);
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-400);
    --text-muted: var(--gray-500);
    --border: var(--gray-700);
    --border-strong: var(--gray-600);
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: #1e3a8a;
    --danger-soft: #450a0a;
    --success-soft: #052e16;
    --warning-soft: #451a03;
    --info-soft: var(--gray-800);
    --danger: var(--red-400);
    --success: var(--green-400);
    --warning: var(--amber-400);
    --surface-inverse: var(--gray-100);
    --on-inverse: var(--gray-800);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
}