/* ============================================================================
   Nawras Admin Suite — Design Tokens (NAW-UI-SPEC-001: DS-1..DS-6, TH-1, TH-5)
   ----------------------------------------------------------------------------
   This is THE token file: the only stylesheet allowed to contain color
   literals (QA-2). Every other stylesheet and every Blade <style> block must
   consume these via var().

   Theming model (TH-1): <html data-theme="light|dark"> flips the DS-2/DS-3
   palettes below. Accent (DS-4/TH-5) via <html data-accent="...">, density
   via <html data-density="...">. Deviations from the spec palette are logged
   in docs/specs/ui-deviation-log.md (DEV-01, DEV-02, DEV-06).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   DS-4 — Accent. Default "blue" is the Nawras brand #007bc4 (DEV-01).
   Soft fills are color-mix derived per spec; never hardcode tints.
   -------------------------------------------------------------------------- */
:root {
    --accent: #007bc4;
    --accent-rgb: 0, 123, 196;
    --accent-hover: color-mix(in srgb, var(--accent) 85%, #000000);
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-soft-strong: color-mix(in srgb, var(--accent) 24%, transparent);
    --on-accent: #FFFFFF;
}

html[data-accent="teal"] {
    --accent: #1D9E75;
    --accent-rgb: 29, 158, 117;
}

html[data-accent="purple"] {
    --accent: #7F77DD;
    --accent-rgb: 127, 119, 221;
}

html[data-accent="coral"] {
    --accent: #D85A30;
    --accent-rgb: 216, 90, 48;
}

/* Static swatch previews (SC-20 accent picker) — every option must render its
   own true color simultaneously, not just the currently-applied --accent. */
.nw-accent-swatch--blue { background: #007bc4; }
.nw-accent-swatch--teal { background: #1D9E75; }
.nw-accent-swatch--purple { background: #7F77DD; }
.nw-accent-swatch--coral { background: #D85A30; }

/* Static mode-thumbnail previews (SC-20 mode picker) — Light/Dark/System
   must render both DS-2 palettes simultaneously regardless of the page's
   currently-applied theme. */
.nw-mode-preview--light {
    background: #F4F6F9;
    border: 1px solid #E3E8EF;
}
.nw-mode-preview--light .nw-mode-preview-bar { background: #007bc4; }
.nw-mode-preview--light .nw-mode-preview-line { background: #C9D2DD; }

.nw-mode-preview--dark {
    background: #11161D;
    border: 1px solid #2A3441;
}
.nw-mode-preview--dark .nw-mode-preview-bar { background: #007bc4; }
.nw-mode-preview--dark .nw-mode-preview-line { background: #3A4654; }

.nw-mode-preview--system {
    background: linear-gradient(135deg, #F4F6F9 50%, #11161D 50%);
    border: 1px solid #C9D2DD;
}
.nw-mode-preview--system .nw-mode-preview-bar { background: #007bc4; }
.nw-mode-preview--system .nw-mode-preview-line { background: #8D99A8; }

/* ----------------------------------------------------------------------------
   DS-2 — Core palette (light) + DS-3 role tints (light)
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
    color-scheme: light;

    /* DS-2 */
    --bg: #F4F6F9;
    --surface: #FFFFFF;
    --surface-alt: #EDF0F5;
    --text: #1D2733;
    --text-muted: #69788A;
    --border: #E3E8EF;

    /* Derived neutrals required by the existing UI (see mapping doc §5) */
    --text-faint: #5F6E83;   /* captions/placeholders — darkened in Phase 5 (QA-4/DEV-19):
                                 the original #94A3B8 read as low as 2.56:1 on --surface,
                                 failing AA even under the 3:1 large-text exception at the
                                 11px caption size this token is actually used at. */
    --text-soft: #475569;    /* sidebar links / form labels tier */
    --hairline: #EDF0F5;     /* row dividers */
    --border-strong: #C9D2DD;/* scrollbar thumbs, emphasized rules */
    --inverse-bg: #1D2733;   /* legacy black-fill buttons (retired in Phase 2/CP-2) */
    --inverse-bg-hover: #1E293B;
    --on-inverse: #FFFFFF;

    /* LD-01 — skeleton loading shimmer. Dedicated pair (not --surface-alt/
       --border, which sit too close in lightness to read as "clearly
       visible" here): a soft neutral gray clearly distinguishable from the
       white --surface, with a slightly lighter highlight for the sweep. */
    --skeleton-base: #E4E8EF;
    --skeleton-highlight: #EFF2F6;

    /* DS-3 role tints — fg on bg meets WCAG AA in both palettes (TH-7/QA-4) */
    --success-fg: #0F6E56;
    --success-bg: #E1F5EE;
    --warning-fg: #854F0B;
    --warning-bg: #FAEEDA;
    --danger-fg: #A32D2D;
    --danger-bg: #FCEBEB;
    --info-fg: #185FA5;
    --info-bg: #E6F1FB;
    --neutral-fg: #5F5E5A;
    --neutral-bg: #F1EFE8;

    /* Solid role fills (buttons, dots, progress) — current values preserved */
    --success-solid: #10b981;
    --success-solid-hover: #059669;
    --danger-solid: #ef4444;
    --danger-solid-hover: #dc2626;
    --danger-solid-active: #b91c1c;
    --warning-solid: #f59e0b;
}

/* ----------------------------------------------------------------------------
   DS-2 — Core palette (dark) + DS-3 role tints (dark)
   Dormant until SC-20 exposes the mode setting (Phase 4).
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    /* DS-2 */
    --bg: #11161D;
    --surface: #1A222C;
    --surface-alt: #232C38;
    --text: #E7ECF3;
    --text-muted: #8D99A8;
    --border: #2A3441;

    /* Derived neutrals */
    --text-faint: #8693A3;   /* lightened in Phase 5 (QA-4/DEV-19) to clear 4.5:1 —
                                 see the light-mode note above for the same fix. */
    --text-soft: #B8C2CE;
    --hairline: #232C38;
    --border-strong: #3A4654;
    --inverse-bg: #E7ECF3;
    --inverse-bg-hover: #D5DCE5;
    --on-inverse: #11161D;

    /* LD-01 — skeleton loading shimmer: a low-elevation surface slightly
       lighter than --surface, never a bright/near-white block. */
    --skeleton-base: #262F3B;
    --skeleton-highlight: #323C49;

    /* DS-3 role tints */
    --success-fg: #5DCAA5;
    --success-bg: #0F3B30;
    --warning-fg: #FAC775;
    --warning-bg: #3E2E0C;
    --danger-fg: #F09595;
    --danger-bg: #421919;
    --info-fg: #85B7EB;
    --info-bg: #122C44;
    --neutral-fg: #B4B2A9;
    --neutral-bg: #2C2C2A;

    /* Solid role fills */
    --success-solid: #10b981;
    --success-solid-hover: #34d399;
    --danger-solid: #ef4444;
    --danger-solid-hover: #f87171;
    --danger-solid-active: #ef4444;
    --warning-solid: #f59e0b;
}

/* ----------------------------------------------------------------------------
   DS-6 — Shape (spec values; flipped from legacy metrics in Phase 2/DEV-06).
   Card 12px, control 8px, pills 999px, 1px borders via --border.
   -------------------------------------------------------------------------- */
:root {
    --radius-card: 12px;
    --radius-control: 8px;
    --radius-field: 8px;
    --radius-sm: 8px;
    --radius-pill: 999px;
}

/* ----------------------------------------------------------------------------
   DS-5 — Type scale (spec values; flipped in Phase 2/DEV-06).
   Sentence case everywhere; minimum rendered size 11px.
   -------------------------------------------------------------------------- */
:root {
    --fs-page-title: 20px;
    --fw-page-title: 500;
    --fs-page-subtitle: 12.5px;
    --fs-card-title: 13.5px;
    --fw-card-title: 500;
    --fs-body: 12.5px;
    --fs-meta: 11.5px;
    --fs-table-header: 11px;
    --fw-table-header: 500;
    --fs-badge: 11.5px;
}

/* ----------------------------------------------------------------------------
   DS-1 — Spacing steps
   -------------------------------------------------------------------------- */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

/* ----------------------------------------------------------------------------
   Top nav bar (header) — single source of truth for the fixed header's
   height so the content offset (#main) can never drift out of sync with it.
   -------------------------------------------------------------------------- */
:root {
    --header-height: 70px;
}

/* ----------------------------------------------------------------------------
   TH-5 — Density. Remaps row padding and control heights only.
   Consumed by CP-5 tables and CP-2 controls from Phase 2 onward.
   -------------------------------------------------------------------------- */
:root {
    /* comfortable = the current table rhythm */
    --density-row-pad-y: 16px;
    --density-row-pad-x: 24px;
    --density-control-h: 38px;
}

html[data-density="compact"] {
    --density-row-pad-y: 8px;
    --density-row-pad-x: 16px;
    --density-control-h: 32px;
}

/* ----------------------------------------------------------------------------
   Bootstrap 5.3 bridge — keeps vendor components (dropdowns, modals, form
   controls) on the DS-2 palette when <html data-bs-theme="dark"> is set by
   the theme runtime alongside data-theme.
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-heading-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-alt);
    --bs-tertiary-bg: var(--surface-alt);
    --bs-tertiary-color: var(--text-faint);
    --bs-border-color: var(--border);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
}

/* ----------------------------------------------------------------------------
   Dark-mode bridge for raw Bootstrap utilities (DM-01/DM-03/DM-04).
   .bg-white / .bg-light / .text-dark / .btn-light hardcode light-only colors
   that never joined the DS-2 palette swap (they read Bootstrap's own
   --bs-white-rgb/--bs-light-rgb/--bs-dark-rgb globals, or — for .btn-light —
   a dedicated --bs-btn-* set that doesn't derive from any shared variable).
   Bridged at the class level rather than those shared *-rgb globals so
   .text-white/.border-white/.bg-dark (correctly theme-safe as white-on-
   colored-button/badge in both palettes) are left untouched.
   -------------------------------------------------------------------------- */
/* .preview-zoom-container excluded: it renders the actual coupon-card
   artwork (coupons/card_templates/designer + preview-modal), which is
   template output designed against a fixed white canvas, not app chrome —
   flipping it would misrepresent what the printed/exported card looks like. */
html[data-theme="dark"] .bg-white:not(.preview-zoom-container) {
    background-color: var(--surface) !important;
}

html[data-theme="dark"] .bg-light {
    background-color: var(--surface-alt) !important;
}

/* .text-dark deliberately excluded when paired with a saturated Bootstrap
   status background (bg-warning/success/info/danger): those backgrounds
   stay bright in both palettes, so Bootstrap's own dark text remains the
   correct, most-readable choice and must not be flipped to light text. */
html[data-theme="dark"] .text-dark:not(.bg-warning):not(.bg-success):not(.bg-info):not(.bg-danger) {
    color: var(--text) !important;
}

html[data-theme="dark"] .btn-light {
    --bs-btn-color: var(--text-soft);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--surface-alt);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--surface-alt);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-disabled-color: var(--text-faint);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--border);
}

/* ----------------------------------------------------------------------------
   Code/terminal surface (DM-02) — intentionally theme-INDEPENDENT. JSON/
   payload viewers read as a fixed dark terminal in both palettes, unlike
   --inverse-bg/--on-inverse (deliberately theme-relative, for the legacy
   black-fill-in-light / light-fill-in-dark button pattern). Do not repoint
   .json-block-style panels at --inverse-bg — that pairing is what caused
   DM-02 (the panel went light in light mode's inverse pair).
   -------------------------------------------------------------------------- */
:root {
    --code-bg: #1D2733;
    --code-text: #FFFFFF;
}

/* ----------------------------------------------------------------------------
   DM-05 — native form-control chrome. color-scheme above already switches
   browser-drawn date/time pickers and <select> popovers to dark chrome;
   this adds a light-on-dark tint to the calendar/clock glyph itself for
   browsers that render it as a filterable icon rather than following
   color-scheme automatically.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}