/*
 * SCLR Design Tokens — single source of truth
 * ─────────────────────────────────────────────────────────────────────────
 * Every sclr-*.css file and every module (WMS, Ecom, Procurement, Finance,
 * HR, Payroll, Property, etc.) should read colours, surfaces, borders,
 * shadows, radius and typography from these variables instead of
 * hardcoding literals. This file must be loaded before sclr-theme.css and
 * before any other sclr/css/*.css file (it already is — see
 * resources/views/partials/header.blade.php).
 *
 * Values below were consolidated from the literals already in use across
 * sclr-theme.css, modal-premium.css, table.css, procurement.css,
 * sclr-infolist.css and sclr-layout-standard.css — nothing here changes
 * what already renders; it just gives the repeated values one name.
 *
 * Do not change these values without checking every consumer — they are
 * the visual identity of the whole app, not just one page.
 *
 * ── Per-company theming ──────────────────────────────────────────────────
 * The colour values here are the DEFAULTS. App\Http\Middleware\InjectThemeCss
 * injects an inline <style> into every page that re-declares the customizable
 * subset from the company's Theme settings, read from cache (see
 * App\Services\ThemeService, App\Support\ThemeTokens). That block uses
 * `html:root` / `html.dark:root`, which outrank the `:root` / `:root.dark`
 * selectors below by specificity, so it wins regardless of where this file is
 * <link>ed in the document.
 *
 * Consequences for editing this file:
 *  - Keep every literal here in sync with the matching default in
 *    App\Support\ThemeTokens::TOKENS, or seeding will re-introduce the old value.
 *  - Derive, don't repeat: anything tinted/gradient/shadowed from a base colour
 *    must be written as var(--sclr-…) or rgba(var(--sclr-…-rgb), α) so it follows
 *    the override automatically. A hardcoded literal will not.
 */

:root {
    /* ── Brand gold ramp (lightest → darkest) ───────────────────────── */
    --sclr-gold-tint-bg: #FFFBF0;
    /* palest cream — "grand total" / highlighted-figure card backgrounds */
    --sclr-gold-bg:    #FAE3B0;
    /* Pale gold-tan mist — Sales infolist criteria/hierarchy card
       backgrounds (#F0E4CC repeated across Sales infolist partials).
       Distinct enough from --sclr-gold-bg/--sclr-gold-pale (noticeably
       lighter/more desaturated) to need its own slot rather than
       reusing either and shifting the existing look. */
    --sclr-gold-mist:  #F0E4CC;
    --sclr-gold-mist-rgb: 240, 228, 204;
    /* Pale tan — "new group" action-button background / scrollbar thumb
       (manage-groups-modal.blade.php). Sits between --sclr-gold-pale and
       --sclr-gold-mist; distinct enough from both to keep its own slot. */
    --sclr-gold-tan: #e5d5be;
    --sclr-gold-pale:  #E6CC91;
    --sclr-gold-soft:  #D5B56B;
    --sclr-gold:       #c8a24a;
    /* primary accent */
    --sclr-gold-dark:  #b8924a;
    --sclr-gold-deep:  #85600B;
    --sclr-gold-light: rgba(var(--sclr-gold-rgb), 0.1);
    --sclr-gold-rgb:   200, 162, 74;
    --sclr-gold-tint-bg-rgb: 255, 251, 240;
    /* #FFFBF0 */
    --sclr-gold-bg-rgb: 250, 227, 176;
    /* #FAE3B0 */
    --sclr-gold-pale-rgb: 230, 204, 145;
    /* #E6CC91 */
    --sclr-gold-soft-rgb: 213, 181, 107;
    /* #D5B56B */
    --sclr-gold-deep-rgb: 133, 96, 11;
    /* #85600B */
    /* Light stop of the premium gold gradient (selected sidebar item, gold
       CTAs). Its own name rather than reusing --sclr-gold-soft, which
       sclr-form.css re-declares to #fdf8ea — that would make the gradient
       depend on which stylesheets a layout happens to load. The dark stop is
       --sclr-premium-gold, below. */
    --sclr-gold-gradient-start: #D5B56B;
    --sclr-gold-dark-rgb: 184, 146, 74;
    /* #b8924a */
    /* Hover step for --sclr-gold-dark buttons (order-management action
       buttons/modals) — one step darker still. */
    --sclr-gold-dark-hover: #a3761e;
    --sclr-gold-dark-hover-rgb: 163, 118, 30;
    /* #a3761e */
    /* use rgba(var(--sclr-gold-rgb), X) for one-off tint opacities */

    /* Muted gold variant — a separate, more desaturated gold gradient
       (active nav items, sidebar accents) reused across many pages
       (customers show page, order-management sidebar, etc). Distinct
       enough from --sclr-gold/--sclr-gold-dark that reusing those would
       visibly shift the colour, so kept as its own pair. */
    --sclr-gold-muted: #c59d5f;
    --sclr-gold-muted-dark: #a07840;
    /* RGB triplets for the muted-gold pair — needed by the Sales module's
       many rgba() tint overrides (badges, focus rings, hover states) that
       would otherwise have to approximate with --sclr-gold-rgb, a visibly
       different (more saturated) gold. */
    --sclr-gold-muted-rgb: 197, 157, 95;
    --sclr-gold-muted-dark-rgb: 160, 120, 64;

    /* ── Status colours ──────────────────────────────────────────────── */
    --sclr-color-success: #28a745;
    --sclr-color-danger:  #dc3545;
    --sclr-color-warning: #ffc107;
    --sclr-color-info:    #17a2b8;
    --sclr-color-primary: #2575fc;
    --sclr-success-rgb: 34, 197, 94;
    --sclr-danger-rgb:  239, 68, 68;
    --sclr-info-rgb:    59, 130, 246;
    --sclr-gray-rgb:    148, 163, 184;

    /* Generic Premium Color System (badges / status pills) */
    --sclr-color-mint-bg: #D1FAE5;
    --sclr-color-mint-text: #065F46;

    --sclr-color-amber-bg: #FEF3C7;
    --sclr-color-amber-text: #984A19;

    --sclr-color-gray-bg: #F3F4F6;
    --sclr-color-gray-text: #424B5A;

    --sclr-color-cream-bg: #FBEED1;
    --sclr-color-cream-text: #886410;

    --sclr-color-red-bg: #ffe1e6;
    --sclr-color-red-text: #b42332;

    --sclr-color-blue-bg: #FBEED1; /* Remapped to Cream */
    --sclr-color-blue-text: #886410; /* Remapped to Gold/Cream text */

    /* Gradients — stops are themeable tokens so the gradient follows the brand */
    --sclr-gradient-premium-start: #6a11cb;
    --sclr-gradient-survey-from: #ffd54f;
    --sclr-gradient-survey-to: #ffb300;
    --sclr-gradient-premium: linear-gradient(135deg, var(--sclr-gradient-premium-start), var(--sclr-color-primary));
    --sclr-gradient-survey:  linear-gradient(135deg, var(--sclr-gradient-survey-from), var(--sclr-gradient-survey-to));

    /* Scaller Premium Brand */
    --sclr-premium-bg: #faf7f2;
    /* Dark stop of the premium gold gradient. */
    --sclr-premium-gold: #9B844F;
    /* RGB triplet for --sclr-premium-gold — reuse for one-off tint opacities
       (active/hover nav indicators) instead of repeating the literal. */
    --sclr-premium-gold-rgb: 155, 132, 79;
    --sclr-premium-border: rgba(var(--sclr-gold-pale-rgb), 0.1);
    --sclr-premium-gradient-gold: linear-gradient(135deg, var(--sclr-gold-gradient-start), var(--sclr-premium-gold));
    --sclr-premium-shadow-gold: 0 4px 12px rgba(var(--sclr-premium-gold-rgb), 0.25);
    --sclr-premium-text-dark: #1e2939;
    --sclr-premium-text-muted: #64748b;

    /* Auth pages (login, register) — bespoke tan/gold accents, distinct
       from the main --sclr-gold ramp. Consolidated from
       resources/views/auth/login.blade.php and auth/register.blade.php,
       reused across their labels, links, borders, and icon buttons. */
    --sclr-auth-border: #dcc8a0;
    --sclr-auth-text: #8d6b23;
    --sclr-auth-text-hover: #71541b;
    --sclr-auth-border-light: #e5ddd0;
    --sclr-auth-bg: #f5ede0;
    --sclr-auth-caption: #9c8a6e;
    --sclr-auth-border-soft: #ede8df;
    --sclr-auth-input-border: #d1c9bc;
    --sclr-auth-gold-tint: #fdf8ee;
    --sclr-auth-surface: #fafaf8;
    --sclr-auth-modal-bg: #f5f0e8;
    --sclr-auth-close-bg: #ebe5d9;
    --sclr-auth-close-hover: #e0d8cc;
    --sclr-auth-close-border: #d9d0c0;

    /* Generic UI greys/status tones (light mode) — named after their
       Tailwind equivalents. Consolidated from auth/register.blade.php;
       not part of the app's own gold/status palette above, but repeated
       often enough to need one name instead of a scattered literal. */
    --sclr-slate-400: #9ca3af;
    --sclr-slate-500: #6b7280;
    --sclr-slate-600: #4b5563;
    --sclr-slate-700: #374151;
    --sclr-gray-200: #e5e7eb;
    --sclr-gray-200-rgb: 229, 231, 235;
    --sclr-red-500: #ef4444;
    --sclr-red-700: #b91c1c;
    --sclr-red-50: #fff7f7;
    --sclr-red-100: #fee2e2;
    --sclr-red-200: #fecaca;
    --sclr-emerald-50: #ecfdf5;
    --sclr-emerald-500: #10b981;
    --sclr-emerald-600: #059669;
    --sclr-emerald-700: #047857;
    --sclr-indigo-50: #eef2ff;
    --sclr-indigo-800: #3730a3;
    --sclr-sky-100: #dfeaff;
    --sclr-blue-700: #245bd7;
    --sclr-amber-50: #fffbeb;
    --sclr-amber-400: #fbbf24;
    --sclr-amber-rgb: 251, 191, 36;
    --sclr-amber-700: #b45309;
    --sclr-amber-800: #92400e;
    --sclr-orange-700: #c2410c;
    --sclr-indigo-500: #6366f1;
    --sclr-indigo-rgb: 99, 102, 241;
    --sclr-green-600: #16a34a;
    --sclr-black: #000000;
    --sclr-slate-900-rgb: 15, 23, 42;
    --sclr-red-600: #da2525;
    --sclr-blue-rgb: 0, 123, 255;
    --sclr-cyan-50: #e0f7fa;
    --sclr-gray-600: #6c757d;
    --sclr-mint-500: #45cb85;
    --sclr-mint-600: #38a36e;

    /* ── Page surfaces / text / borders — Light Mode ─────────────────── */
    /* Dual-mode surfaces — these flip in :root.dark below, unlike
       --sclr-surface-0..3 which exist only in dark mode. Use these for card,
       panel and input backgrounds so a page works in both themes without
       needing its own html.dark rules. */
    --sclr-surface-card: #ffffff;
    --sclr-surface-card-rgb: 255, 255, 255;
    --sclr-surface-raised: #f9fafb;
    --sclr-surface-raised-rgb: 249, 250, 251;
    --sclr-surface-sunken: #f3f4f6;
    --sclr-surface-sunken-rgb: 243, 244, 246;
    --sclr-border-tan: #f0ebe0;
    --sclr-bg-from: #fef9f0;
    --sclr-bg-to: #fef5e7;
    --sclr-bg-to-rgb: 254, 245, 231;
    --sclr-text-dark: #1e2939;
    --sclr-text-muted: #576476;
    --sclr-border-glass: rgba(255, 255, 255, 0.4);
    /* Warm brownish card-shadow tint, reused across several premium
       "show" cards (dashboard KPI cards, invoice/quotation show cards) */
    --sclr-shadow-warm-rgb: 91, 76, 48;

    /* Fixed-contrast white — for text/icons on accent-colored surfaces
       (gold/green buttons, badges) that don't flip between themes */
    --sclr-white: #ffffff;

    /* RGB channel triplets — build a one-off rgba() tint without a new var */
    --sclr-white-rgb: 255, 255, 255;
    --sclr-black-rgb: 0, 0, 0;

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --sclr-shadow-sm: 0 4px 12px rgba(var(--sclr-black-rgb), 0.08);
    --sclr-shadow-md: 0px 8px 32px 0px rgba(var(--sclr-black-rgb), 0.1);
    --sclr-shadow-lg: 0 20px 40px rgba(var(--sclr-black-rgb), 0.08);
    --sclr-shadow-gold: 0 4px 16px 0 rgba(var(--sclr-gold-rgb), 0.3);
    --sclr-card-shadow: var(--sclr-shadow-md);
    /* legacy alias, kept for existing consumers */
    --sclr-shadow-sm-legacy: 0 4px 8px rgba(var(--sclr-black-rgb), 0.2);
    --sclr-shadow-md-legacy: 0 6px 12px rgba(var(--sclr-black-rgb), 0.25);

    /* ── Radius scale ─────────────────────────────────────────────────── */
    --sclr-radius-sm: 10px;
    --sclr-radius-md: 12px;
    --sclr-radius-lg: 14px;

    /* ── Spacing scale (for new/refactored components) ───────────────── */
    --sclr-space-1: 4px;
    --sclr-space-2: 8px;
    --sclr-space-3: 12px;
    --sclr-space-4: 16px;
    --sclr-space-6: 24px;
    --sclr-space-8: 32px;

    /* ── Typography ───────────────────────────────────────────────────── */
    --sclr-font-sans: 'Inter', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE — token overrides
   Every module's dark-mode CSS should consume these instead of repeating
   #1e2130 / #262a3b / #e5e7eb / etc. as literals.
   ══════════════════════════════════════════════════════════════════════ */
:root.dark {
    /* Dark halves of the dual-mode surfaces — deliberately equal to
       --sclr-surface-2 / -3 / -0 so tokenised panels match hand-written
       html.dark rules elsewhere in the app. */
    --sclr-surface-card: #1e2130;
    --sclr-surface-card-rgb: 30, 33, 48;
    --sclr-surface-raised: #262a3b;
    --sclr-surface-raised-rgb: 38, 42, 59;
    --sclr-surface-sunken: #14151d;
    --sclr-surface-sunken-rgb: 20, 21, 29;
    --sclr-bg-from: #14151d;
    --sclr-bg-to: #1a1c26;
    --sclr-bg-to-rgb: 26, 28, 38;
    --sclr-text-dark: #e5e7eb;
    --sclr-text-muted: #94a3b8;
    --sclr-border-glass: rgba(255, 255, 255, 0.08);
    /* Stronger than --sclr-border-glass — for borders/inputs needing more definition
       against a dark surface (e.g. Scaller site's --border / --input tokens) */
    --sclr-border-mid: rgba(255, 255, 255, 0.15);

    /* Dark-only surface/text steps (no light-mode equivalent needed —
       only ever consumed inside html.dark selectors) */
    --sclr-surface-0: #14151d;
    --sclr-surface-0-rgb: 20, 21, 29;
    /* darkest — sidebar, footer, page bg start */
    --sclr-surface-1: #1a1c26;
    /* page bg end / gradient stop */
    --sclr-surface-2: #1e2130;
    /* card / table / modal surface (most common) */
    --sclr-surface-3: #262a3b;
    /* raised surface — inputs, secondary buttons, hover */
    --sclr-text-strong-dark: #f1f5f9;
    /* headings / emphasized values */
    --sclr-text-soft-dark: #cbd5e1;
    /* secondary text, softer than base */

    /* Status badge text tones (paired with --sclr-{success,danger,info}-rgb
       tint backgrounds at ~0.15 opacity) */
    --sclr-success-text-dark: #4ade80;
    --sclr-danger-text-dark: #f87171;
    --sclr-info-text-dark: #93c5fd;

    /* Text colour for all primary/gold action buttons (.sclr-btn-gold,
       .sclr-btn--gold, Filament [data-color="primary"/"warning"] buttons)
       in Dark Mode. Single source of truth — reference this instead of
       hardcoding a colour on any individual button. */
    --sclr-btn-primary-text-dark: #ffffff;
}