/* ============================================================
   LIMRA ERP — DESIGN TOKENS
   Single source of truth. Loaded LAST among global stylesheets
   so it wins the cascade over light.css / app.css.

   Structure:
     1. Primitives   — raw ramps, theme-independent
     2. Semantics    — light + dark, the tokens components use
     3. Compatibility— legacy names mapped onto the semantics,
                       so the whole app restyles from this file alone
   ============================================================ */

/* ============================================================
   1. PRIMITIVES
   ============================================================ */
:root {
    /* Brand — single blue ramp (replaces the 6 competing blues) */
    --brand-50: #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;
    /* Channel triplet so components can build tints/glows from the
       current brand instead of hardcoding rgba(8,102,255,...) */
    --brand-rgb: 37 99 235;

    /* Neutral — one ramp (replaces the Slate/Gray/Zinc mix) */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Status */
    --success-500: #10b981;
    --success-600: #059669;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --info-500: #0ea5e9;

    /* Shape — balanced (8–10px) */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Elevation — subtle */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .06);

    /* Layout — these now match what the components actually use */
    --header-height: 60px;
    --sidebar-width: 280px;
    --offcanvas-width: 300px;

    /* Type */
    --font-sans: 'Cairo', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
    --font-mono: 'Calibri', Consolas, 'Courier New', monospace;
}

/* ============================================================
   2. SEMANTICS — LIGHT (default)
   ============================================================ */
:root,
[data-theme="light"] {
    color-scheme: light;

    --bg-app: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-sidebar: #16181d;
    --sidebar-text: #ffffff;
    --sidebar-text-strong: #ffffff;
    --sidebar-hover-bg: #22262e;
    --sidebar-active-bg: rgb(var(--brand-rgb) / .18);
    --sidebar-active-text: #ffffff;
    --sidebar-border: #262a31;
    --sidebar-icon-bg: rgb(255 255 255 / .07);
    --sidebar-subtle: rgb(255 255 255 / .04);
    --sidebar-scroll: rgb(255 255 255 / .14);
    --sidebar-placeholder: #cbd5e1;

    --text-primary: #334155;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-accent: #ffffff;

    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --input-bg: #ffffff;
    --input-color: #334155;
    --input-border: #cbd5e1;
    --input-focus-border: var(--brand-500);
    --input-placeholder: #94a3b8;

    --table-bg: #ffffff;
    --table-header-bg: var(--brand-600);
    --table-header-color: #ffffff;
    --table-border: #e7ebf0;
    --table-row-bg: #ffffff;
    --table-striped-bg: rgba(100, 116, 139, .025);
    --table-hover-bg: rgba(37, 99, 235, .035);
}

/* ============================================================
   2b. SEMANTICS — DARK
   Near-black surfaces rather than pure #000 so elevation reads
   correctly. Inputs intentionally stay light — established
   decision for this project.
   Also honours Bootstrap's [data-bs-theme="dark"] via :is() —
   zero behaviour change while only [data-theme] is in use.
   ============================================================ */
:is([data-theme="dark"], [data-bs-theme="dark"]) {
    color-scheme: dark;

    --bg-app: #0d0f12;
    --bg-surface: #17191d;
    --bg-subtle: #121418;
    --bg-elevated: #1f2328;
    --bg-hover: #22262c;
    --bg-sidebar: #16181d;
    --sidebar-text: #ffffff;
    --sidebar-text-strong: #ffffff;
    --sidebar-hover-bg: #22262e;
    --sidebar-active-bg: rgb(var(--brand-rgb) / .2);
    --sidebar-active-text: #ffffff;
    --sidebar-border: #262a31;
    --sidebar-icon-bg: rgb(255 255 255 / .07);
    --sidebar-subtle: rgb(255 255 255 / .04);
    --sidebar-scroll: rgb(255 255 255 / .14);
    --sidebar-placeholder: #cbd5e1;

    --text-primary: #e6e8eb;
    --text-secondary: #a3abb5;
    --text-muted: #767e89;
    --text-on-accent: #ffffff;

    --border: #2b3037;
    --border-strong: #3b414a;

    --input-bg: #ffffff;
    --input-color: #334155;
    --input-border: #cbd5e1;
    --input-focus-border: var(--brand-500);
    --input-placeholder: #94a3b8;

    --table-bg: #0f1115;
    --table-header-bg: #17191d;
    --table-header-color: #e6e8eb;
    --table-border: rgba(255, 255, 255, .08);
    --table-row-bg: #0f1115;
    --table-striped-bg: rgba(148, 163, 184, .045);
    --table-hover-bg: rgba(37, 99, 235, .08);
}

/* ============================================================
   3. COMPATIBILITY LAYER
   Legacy token names from app.css / light.css / site.css and the
   per-component --pos-* / --ip-* / --k-* families, all resolved
   against the semantics above. Nothing to edit per-component.
   ============================================================ */
:root,
[data-theme="light"],
[data-theme="dark"] {

    /* --- app.css family --- */
    --primary: var(--brand-600);
    --primary-hover: var(--brand-700);
    --primary-light: var(--brand-50);
    --primary-dark: var(--brand-800);
    --secondary: var(--slate-500);
    --secondary-hover: var(--slate-600);
    --success: var(--success-500);
    --success-hover: var(--success-600);
    --warning: var(--warning-500);
    --warning-hover: var(--warning-600);
    --danger: var(--danger-500);
    --danger-hover: var(--danger-600);
    --background: var(--bg-app);
    --surface: var(--bg-surface);
    --text-main: var(--text-primary);
    --text-on-dark: var(--slate-50);
    --border-color: var(--border);
    --white: #ffffff;

    /* --- light.css family --- */
    --content-bg: var(--bg-app);
    --card-bg: var(--bg-surface);
    --card-border: var(--border);
    --card-shadow: var(--shadow-sm);
    --text-primary-color: var(--text-primary);
    --text-secondary-color: var(--text-secondary);
    --dashboard-bg: var(--bg-app);
    --bs-body-bg: var(--bg-app);
    --bs-body-color: var(--text-primary);
    --background-main: var(--bg-surface);
    --background-item1: var(--brand-600);
    --background-item1-hover: var(--bg-hover);
    --icon-color: var(--text-primary);
    --nav-link-color: var(--text-primary);
    --active-bg: var(--slate-600);
    --hover-opacity: .5;

    /* Legacy sidebar name from light.css — kept pointing at the canonical
       token so the desktop sidebar and the mobile off-canvas match. */
    --sidebar-bg: var(--bg-sidebar);

    /* Buttons */
    --btn-bg: var(--brand-600);
    --btn-text: #ffffff;
    --btn-border: none;
    --general-btn-bg: var(--brand-600);
    --general-btn-text: #ffffff;
    --general-btn-border: none;
    --general-btn-hover-bg: #ffffff;
    --general-btn-hover-text: var(--brand-600);

    /* --- site.css family --- */
    --color_Blue: var(--brand-600);
    --color_Dark1: var(--bg-surface);
    --color_Dark2: var(--bg-elevated);
    --color_Light1: var(--text-primary);
    --color_Light2: var(--text-secondary);

    /* --- POS family --- */
    --pos-primary: var(--brand-600);
    --pos-primary-soft: var(--brand-50);
    --pos-ink: var(--text-primary);
    --pos-muted: var(--text-muted);
    --pos-line: var(--border);
    --pos-soft: var(--bg-subtle);
    --pos-danger: var(--danger-500);
    --pos-warning: var(--warning-500);
    --pos-radius: var(--radius-md);
    --pos-shadow: var(--shadow-sm);

    /* --- IP (receipt print) family --- */
    --ip-primary: var(--brand-600);
    --ip-cyan: var(--info-500);
    --ip-ink: var(--text-primary);
    --ip-border: var(--border);
    --ip-muted: var(--text-muted);

    /* --- K family --- */
    --k-primary: var(--brand-600);
    --k-primary-hover: var(--brand-700);
    --k-surface: var(--bg-surface);
    --k-surface-alt: var(--bg-subtle);
    --k-border: var(--border);
    --k-text: var(--text-primary);
    --k-text-muted: var(--text-muted);
    --k-radius: var(--radius-md);
    --k-shadow: var(--shadow-md);
    --kpi-bg: var(--bg-surface);
    --kpi-c: var(--brand-600);

    /* --- misc --- */
    --hover-color: var(--brand-600);
    --hover-bg-alpha: var(--brand-100);
    --ring-accent: var(--brand-500);
    --accent-color: var(--brand-600);
    --primary-color: var(--brand-600);
    --secondary-color-bg: var(--brand-50);
    --panel-border: var(--border);
    --bg-gradient: linear-gradient(135deg, var(--bg-subtle) 0%, var(--bg-app) 100%);

    /* --- offcanvas (Bootstrap reads these) --- */
    --bs-offcanvas-width: var(--offcanvas-width);
}

/* ============================================================
   4. BOOTSTRAP BRIDGE
   252 pages render <QuickGrid Class="table table-bordered
   table-striped table-hover table-sm">. Bootstrap drives all of
   those through --bs-table-*, so mapping them here themes every
   table at once — replacing the ~70 lines of !important overrides
   that used to fight Bootstrap in app.css.
   ============================================================ */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--table-border);
    --bs-table-striped-bg: var(--table-striped-bg);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-hover-color: var(--text-primary);
    --bs-border-color: var(--border);
}