/*
 * Blaas Design Tokens
 * ------------------------------------------------------------
 * Single source of truth for colors, spacing, typography,
 * radius, shadows, z-index and transitions used across the
 * internal app, the customer portal and the public-list view.
 *
 * Loaded BEFORE app.css in:
 *   - app/templates/base.html              (internal)
 *   - app/templates/portal/base.html       (customer)
 *   - app/templates/public/list.html       (public, standalone)
 *
 * Tailwind config blocks in those files remain — they are now
 * consumers of these values (e.g. primary.500 = #10b981 = --color-brand).
 *
 * Rule: any new CSS in app.css and template <style> blocks must
 * reference var(--*) tokens. Hardcoded hex/rgba is only allowed
 * inside this file.
 */

:root {
    /* ── Backgrounds ───────────────────────────────────────────── */
    --color-bg-app: #020617;            /* gray-950 — body */
    --color-bg-surface: rgba(31, 41, 55, 0.6); /* gray-800/60 — cards, filter card */
    --color-bg-elevated: #111827;       /* gray-900 — modals, table headers */
    --color-bg-nav: #0f172a;            /* dark-900 — top nav, dropdown panels */
    --color-bg-input: #0a0f1d;          /* slightly darker than nav — inputs */
    --color-bg-popover: #0b1220;        /* dropdown panel bg */
    --color-bg-row-hover: #1e293b;      /* table row / list item hover */

    /* ── Borders ───────────────────────────────────────────────── */
    --color-border-subtle: #1f2937;     /* gray-800 — most card/input borders */
    --color-border: #374151;            /* gray-700 — dividers */
    --color-border-strong: #475569;     /* slate-600 — checkbox idle */
    --color-border-hover: #334155;      /* slate-700 — input hover */

    /* ── Text ──────────────────────────────────────────────────── */
    --color-text-primary: #f3f4f6;      /* gray-100 */
    --color-text-secondary: #d1d5db;    /* gray-300 */
    --color-text-tertiary: #9ca3af;     /* gray-400 — captions, subtitles */
    --color-text-muted: #6b7280;        /* gray-500 */
    --color-text-disabled: #4b5563;     /* gray-600 */
    --color-text-placeholder: #475569;  /* slate-600 */

    /* ── Brand (emerald) ───────────────────────────────────────── */
    --color-brand: #10b981;             /* emerald-500 — primary */
    --color-brand-hover: #059669;       /* emerald-600 */
    --color-brand-fg: #022c22;          /* emerald-950 — text on brand */
    --color-brand-soft: #34d399;        /* emerald-400 — accents */
    --color-brand-light: #6ee7b7;       /* emerald-300 — text on dark bg */
    --color-brand-bg-soft: rgba(16, 185, 129, 0.10);
    --color-brand-bg-medium: rgba(16, 185, 129, 0.18);
    --color-brand-ring: rgba(16, 185, 129, 0.15);

    /* ── Status tones (badges) ─────────────────────────────────── */
    --color-success: #10b981;
    --color-success-bg-soft: rgba(16, 185, 129, 0.12);
    --color-success-fg: #6ee7b7;

    --color-warn: rgb(251 191 36 / 0.7); /* amber-400/70 — Sensitive 1.3x */
    --color-warn-strong: #fbbf24;
    --color-warn-bg-soft: rgba(251, 191, 36, 0.10);
    --color-warn-fg: #fde68a;

    --color-danger: #ef4444;            /* red-500 */
    --color-danger-bg-soft: rgba(127, 29, 29, 0.30); /* red-900/30 */
    --color-danger-fg: #fecaca;         /* red-200 */
    --color-danger-border: rgba(185, 28, 28, 0.40);

    --color-info: #38bdf8;              /* sky-400 — agency badge, info banners */
    --color-info-bg-soft: rgba(7, 89, 133, 0.40); /* sky-900/40 */
    --color-info-fg: #7dd3fc;           /* sky-300 */
    --color-info-border: rgba(3, 105, 161, 0.40);

    /* ── Typography ────────────────────────────────────────────── */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-md: 13px;
    --text-base: 14px;
    --text-lg: 16px;

    --leading-tight: 1.2;
    --leading-normal: 1.45;

    /* ── Spacing ───────────────────────────────────────────────── */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* ── Radius ────────────────────────────────────────────────── */
    --radius-sm: 4px;        /* checkboxes, tiny pills */
    --radius: 6px;           /* inputs, small buttons */
    --radius-md: 8px;        /* default — buttons, filter pills */
    --radius-lg: 12px;       /* cards, popover panels */
    --radius-xl: 16px;       /* hero cards */
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────────── */
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-popover: 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-popover-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus-ring: 0 0 0 3px var(--color-brand-ring);

    /* ── Z-index scale ─────────────────────────────────────────── */
    --z-dropdown: 30;
    --z-selection-bar: 40;
    --z-modal: 50;
    --z-tooltip: 60;

    /* ── Transitions ───────────────────────────────────────────── */
    --transition-fast: 120ms ease;
    --transition: 150ms ease;
    --transition-slow: 180ms ease;
}