/* ============================================================
   Semantic theme tokens
   ------------------------------------------------------------
   Single source of truth for surface / border / text / accent
   colors across light + dark themes. Components MUST consume
   these via var(--token) instead of hardcoding hex, so dark
   mode needs no per-component duplication.

   Extend here as components are migrated (tables, layout, …).
   ============================================================ */

:root {
    /* Surfaces */
    --surface: #ffffff;
    --surface-sunken: #f8fafc;

    /* Borders */
    --border: #dbe4ef;
    --border-subtle: #eef2f7;

    /* Text */
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    /* Danger / destructive */
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-tint: #fef2f2;
    --danger-on-tint: #dc2626;
    --danger-ring: rgba(220, 38, 38, 0.35);

    /* Neutral controls */
    --control-surface: #ffffff;
    --control-border: #cfdbe9;
    --control-border-hover: #b6c6da;
    --control-surface-hover: #f1f5fb;
    --control-text: #172033;
    --control-placeholder: #94a3b8;
    --control-focus-border: #7aa7d9;
    --control-focus-ring: rgba(37, 99, 235, 0.12);

    --sb-thumb: #cbd5e1;
    --sb-thumb-hover: #94a3b8;

    /* Elevation */
    --shadow-modal: 0 28px 70px rgba(15, 23, 42, 0.24);
}

html[data-theme="dark"] {
    --surface: #141d30;
    --surface-sunken: #0e1828;

    --border: #2a3b56;
    --border-subtle: #21314c;

    --text: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #94a3b8;

    --danger: #dc2626;
    --danger-hover: #ef4444;
    --danger-tint: rgba(220, 38, 38, 0.16);
    --danger-on-tint: #f87171;
    --danger-ring: rgba(220, 38, 38, 0.35);

    --control-surface: #0e1828;
    --control-border: #2a3b56;
    --control-border-hover: #2d5183;
    --control-surface-hover: #1a2c49;
    --control-text: #e2e8f0;
    --control-placeholder: #64748b;
    --control-focus-border: #3b82f6;
    --control-focus-ring: rgba(59, 130, 246, 0.2);

    --sb-thumb: #2b466b;
    --sb-thumb-hover: #3b5a86;

    --shadow-modal: 0 28px 70px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------
   Data table (--dt-*)
   Namespaced to avoid collision with legacy :root tokens
   (--success, --table-row-*, --accent already exist in app.css).
   ------------------------------------------------------------ */
:root {
    --dt-container-bg: #ffffff;
    --dt-container-border: #d1d9e6;
    --dt-container-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);

    --dt-head-bg: #ecf1f8;
    --dt-head-text: #475569;
    --dt-head-border: #dbe4ef;
    --dt-head-border-soft: #e8eef6;

    --dt-cell-text: #1e293b;
    --dt-cell-border: #eef1f7;

    --dt-row-odd: #ffffff;
    --dt-row-even: #f8fbff;
    --dt-row-hover: #eef6ff;

    --dt-title: var(--blue-800);
    --dt-dash: #cbd5e1;

    /* Accent families: info / success / warning / danger */
    --dt-info-tint: #eff6ff;
    --dt-info-border: #bfdbfe;
    --dt-info-text: #1e40af;
    --dt-info-strong: #1d4ed8;
    --dt-info-icon: #3b82f6;

    --dt-success-tint: #e0f2e9;
    --dt-success-border: #bbf7d0;
    --dt-success-text: #166534;
    --dt-success-strong: #15803d;
    --dt-success-icon: #16a34a;

    --dt-warning-tint: #fffbeb;
    --dt-warning-border: #fde68a;
    --dt-warning-text: #b45309;
    --dt-warning-strong: #b45309;
    --dt-warning-icon: #d97706;

    --dt-danger-tint: #fff1f2;
    --dt-danger-border: #fecdd3;
    --dt-danger-text: #be123c;
    --dt-danger-icon: #e11d48;

    /* Label chip color-mix base (per-label hue comes from inline --chip-color) */
    --dt-chip-base: #ffffff;
    --dt-chip-text-base: #172033;

    /* Empty state */
    --dt-empty-icon-bg: #f1f5f9;
    --dt-empty-icon-text: #94a3b8;
    --dt-empty-title: #334155;
    --dt-empty-sub: #94a3b8;
}

html[data-theme="dark"] {
    --dt-container-bg: #111b2e;
    --dt-container-border: #2a3b56;
    --dt-container-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);

    --dt-head-bg: #18243d;
    --dt-head-text: #94a3b8;
    --dt-head-border: #2a3b56;
    --dt-head-border-soft: #243a59;

    --dt-cell-text: #cbd5e1;
    --dt-cell-border: #243a59;

    --dt-row-odd: #111b2e;
    --dt-row-even: #16243c;
    --dt-row-hover: #20385c;

    --dt-title: #e2e8f0;
    --dt-dash: #475569;

    --dt-info-tint: rgba(59, 130, 246, 0.15);
    --dt-info-border: rgba(59, 130, 246, 0.35);
    --dt-info-text: #93c5fd;
    --dt-info-strong: #bfdbfe;
    --dt-info-icon: #93c5fd;

    --dt-success-tint: rgba(34, 197, 94, 0.15);
    --dt-success-border: rgba(34, 197, 94, 0.35);
    --dt-success-text: #86efac;
    --dt-success-strong: #86efac;
    --dt-success-icon: #34d399;

    --dt-warning-tint: rgba(251, 191, 36, 0.14);
    --dt-warning-border: rgba(251, 191, 36, 0.35);
    --dt-warning-text: #fcd34d;
    --dt-warning-strong: #fcd34d;
    --dt-warning-icon: #fbbf24;

    --dt-danger-tint: rgba(244, 63, 94, 0.14);
    --dt-danger-border: rgba(244, 63, 94, 0.35);
    --dt-danger-text: #fda4af;
    --dt-danger-icon: #fda4af;

    --dt-chip-base: #141d30;
    --dt-chip-text-base: #ffffff;

    --dt-empty-icon-bg: #1a2c49;
    --dt-empty-icon-text: #64748b;
    --dt-empty-title: #cbd5e1;
    --dt-empty-sub: #64748b;
}

/* ------------------------------------------------------------
   Page header (--ph-*)
   ------------------------------------------------------------ */
:root {
    --ph-bg: #ffffff;
    --ph-border: #dbe4ef;
    --ph-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

    --ph-title: var(--blue-800);
    --ph-meta: #64748b;
    --ph-separator: #cbd5e1;

    --ph-icon-bg: #fffbeb;
    --ph-icon-border: #fde68a;
    --ph-icon-text: #b45309;

    --ph-count-bg: #eff6ff;
    --ph-count-text: #1d4ed8;

    --ph-action-bg: #084298;
    --ph-action-border: #084298;
    --ph-action-text: #ffffff;
    --ph-action-hover-bg: #052c65;
    --ph-action-hover-border: #052c65;
    --ph-action-shadow: rgba(8, 66, 152, 0.22);

    --ph-action-grad-top: #1366d6;
    --ph-action-grad-bottom: #084298;
    --ph-action-grad-top-hover: #1d72e8;
    --ph-action-grad-bottom-hover: #0a58ca;
    --ph-action-ring: rgba(13, 110, 253, 0.28);
}

html[data-theme="dark"] {
    --ph-bg: #141d30;
    --ph-border: #2a3b56;
    --ph-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

    --ph-title: #e2e8f0;
    --ph-meta: #94a3b8;
    --ph-separator: #475569;

    --ph-icon-bg: rgba(251, 191, 36, 0.12);
    --ph-icon-border: rgba(251, 191, 36, 0.35);
    --ph-icon-text: #fcd34d;

    --ph-count-bg: rgba(59, 130, 246, 0.16);
    --ph-count-text: #93c5fd;

    --ph-action-bg: #0a58ca;
    --ph-action-border: #0a58ca;
    --ph-action-text: #ffffff;
    --ph-action-hover-bg: #0b66e4;
    --ph-action-hover-border: #0b66e4;
    --ph-action-shadow: rgba(10, 88, 202, 0.4);

    --ph-action-grad-top: #2f7df0;
    --ph-action-grad-bottom: #0a58ca;
    --ph-action-grad-top-hover: #3b8bff;
    --ph-action-grad-bottom-hover: #0b66e4;
    --ph-action-ring: rgba(59, 130, 246, 0.35);
}

/* ------------------------------------------------------------
   Search toolbar + filter panel (--tb-*)
   ------------------------------------------------------------ */
:root {
    --tb-bar-bg: #f8fbfe;
    --tb-bar-border: #dbe4ef;
    --tb-search-icon: #64748b;

    --tb-clear-border: #fecdd3;
    --tb-clear-bg: #fff7f8;
    --tb-clear-text: #be123c;
    --tb-clear-hover-border: #fda4af;
    --tb-clear-hover-bg: #fff1f2;
    --tb-clear-hover-text: #9f1239;

    --tb-filters-border: #bfdbfe;
    --tb-filters-bg: #eff6ff;
    --tb-filters-text: #1d4ed8;
    --tb-filters-active-border: #93c5fd;
    --tb-filters-active-bg: #dbeafe;
    --tb-filters-active-text: #1e40af;

    --tb-panel-bg: #ffffff;
    --tb-panel-border: #dbe4ef;
    --tb-panel-head-text: #475569;
    --tb-panel-icon-bg: #eff6ff;
    --tb-panel-icon-text: #1d4ed8;
    --tb-label: #475569;

    --tb-ts-chip-bg: #eff6ff;
    --tb-ts-chip-text: #1e40af;
    --tb-dropdown-bg: #ffffff;
    --tb-dropdown-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] {
    --tb-bar-bg: #141d30;
    --tb-bar-border: #2a3b56;
    --tb-search-icon: #94a3b8;

    --tb-clear-border: rgba(244, 63, 94, 0.35);
    --tb-clear-bg: rgba(244, 63, 94, 0.1);
    --tb-clear-text: #fda4af;
    --tb-clear-hover-border: rgba(244, 63, 94, 0.5);
    --tb-clear-hover-bg: rgba(244, 63, 94, 0.16);
    --tb-clear-hover-text: #fecdd3;

    --tb-filters-border: rgba(59, 130, 246, 0.35);
    --tb-filters-bg: rgba(59, 130, 246, 0.12);
    --tb-filters-text: #93c5fd;
    --tb-filters-active-border: rgba(59, 130, 246, 0.5);
    --tb-filters-active-bg: rgba(59, 130, 246, 0.2);
    --tb-filters-active-text: #bfdbfe;

    --tb-panel-bg: #141d30;
    --tb-panel-border: #2a3b56;
    --tb-panel-head-text: #94a3b8;
    --tb-panel-icon-bg: rgba(59, 130, 246, 0.16);
    --tb-panel-icon-text: #93c5fd;
    --tb-label: #94a3b8;

    --tb-ts-chip-bg: rgba(59, 130, 246, 0.18);
    --tb-ts-chip-text: #bfdbfe;
    --tb-dropdown-bg: #141d30;
    --tb-dropdown-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   Form section (--fs-*)
   Card surfaces/borders reuse --surface/--border; controls reuse
   --control-*. Only the numbered badge + card shadow are bespoke.
   ------------------------------------------------------------ */
:root {
    --fs-badge-bg: #eff6ff;
    --fs-badge-text: #1d4ed8;
    --fs-page-bg: #edf1f7;
    --fs-accent: #1d4ed8;
    --fs-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] {
    --fs-badge-bg: rgba(59, 130, 246, 0.16);
    --fs-badge-text: #93c5fd;
    --fs-page-bg: #070b14;
    --fs-accent: #60a5fa;
    --fs-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ------------------------------------------------------------
   Detail modal accents (--detail-*)
   ------------------------------------------------------------ */
:root {
    --detail-type-bg: #ecfeff;
    --detail-type-text: #0e7490;
    --detail-type-border: #a5f3fc;
    --detail-approved-bg: #15603a;

    --detail-stat-accent-bg: #eff5ff;
    --detail-stat-accent-border: #cfe0f8;

    --detail-close-bg: #fee2e2;
    --detail-close-text: #dc2626;
    --detail-close-hover-bg: #fecaca;

    --detail-edit-bg: #f59e0b;
    --detail-edit-hover-bg: #d97706;
    --detail-edit-text: #ffffff;
}

html[data-theme="dark"] {
    --detail-type-bg: rgba(6, 182, 212, 0.15);
    --detail-type-text: #67e8f9;
    --detail-type-border: rgba(6, 182, 212, 0.35);
    --detail-approved-bg: #166534;

    --detail-stat-accent-bg: rgba(59, 130, 246, 0.12);
    --detail-stat-accent-border: rgba(59, 130, 246, 0.3);

    --detail-close-bg: rgba(220, 38, 38, 0.18);
    --detail-close-text: #fca5a5;
    --detail-close-hover-bg: rgba(220, 38, 38, 0.28);

    --detail-edit-bg: #d97706;
    --detail-edit-hover-bg: #b45309;
    --detail-edit-text: #ffffff;
}