/* ============================================================
   _design_tokens.css
   Design System — Source of truth for NEUTRAL tokens.

   Loaded FIRST (before _reseller_styles.html and any page CSS)
   so reseller config and page-specific styles can override.

   Scope:
     - Neutral palette (gray scale, surface, text, border)
     - Semantic non-brand colors (success/warning/danger/info)
     - Spacing scale (4px base)
     - Radius scale + legacy aliases
     - Shadow scale + legacy aliases
     - Typography scale (sizes, weights, line-heights)
     - Z-index scale

   NOT included (live in _reseller_styles.html or base.html):
     - Brand colors (--primary-color, --secondary-color, --accent-color)
     - Brand-derived gradients (--bg-gradient, --credential-bg, --btn-email-*)
     - Font families (--heading-font, --body-font) — per-reseller
     - --font-size-base — per-reseller
     - Sidebar tokens — per-reseller branding

   Cascade order (later overrides earlier):
     1. This file                 (canonical neutral tokens)
     2. _reseller_styles.html     (brand: primary/secondary/accent/fonts/radii by button_style)
     3. base.html <style>         (fallback brand when no reseller_config)
     4. Page CSS / page <style>   (page-local overrides)

   Sprint 2-3 will progressively remove duplicated :root blocks
   from base.html, basic_user_interface_v2.html, and admin/reseller
   templates so this file becomes the single source.

   IMPORTANT: This file must NOT cause visible changes on its own.
   All canonical values match what already won the cascade in production.
   ============================================================ */

:root {
    /* ===== Neutral palette (slate/gray scale) ===== */
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* ===== Surfaces ===== */
    --background-color: #f1f5f9;     /* matches base.html:68 — page background */
    --surface-bg:       #f8f9fb;     /* matches basic_user_interface_v2.html:70 — app shell */
    --surface-card:     #ffffff;     /* card/panel background */
    --surface-hover:    #f3f4f6;     /* hover overlay on neutral surfaces */
    --card-bg:          var(--surface-card);  /* fills the gap _admin_styles.html consumes (was var(--card-bg, #fff)) */

    /* ===== Borders ===== */
    --border-color: #e5e7eb;         /* primary border */
    --border-light: #f0f1f3;         /* subtle border / divider */
    --border-strong: #d1d5db;        /* high-contrast border (classic layout) */

    /* ===== Text ===== */
    --text-color:      #1e293b;      /* matches base.html — primary text on light bg */
    --text-primary:    var(--text-color);  /* alias used by basic_user_interface_v2 */
    --text-secondary:  #4b5563;
    --text-muted:      #64748b;      /* base.html value wins over basic_user_v2's #9ca3af — Sprint 2 reconciles */
    --text-inverse:    #ffffff;

    /* ===== Semantic (non-brand) ===== */
    --success-color: #10b981;
    --success-bg:    rgba(16, 185, 129, 0.12);
    --success-fg:    #047857;
    --warning-color: #f59e0b;
    --warning-bg:    rgba(245, 158, 11, 0.15);
    --warning-fg:    #b45309;
    --danger-color:  #ef4444;
    --danger-bg:     rgba(239, 68, 68, 0.10);
    --danger-fg:     #b91c1c;
    --info-color:    #3b82f6;
    --info-bg:       rgba(59, 130, 246, 0.10);
    --info-fg:       #1d4ed8;

    /* ===== Spacing scale (base 4px) ===== */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ===== Radius scale ===== */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-pill: 999px;
    /* NOTE: --btn-radius / --card-radius / --input-radius are owned by
       _reseller_styles.html (vary by button_style: default/pill/square/rounded).
       Do NOT define defaults here — base.html provides fallback when no reseller. */

    /* ===== Shadow scale ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.12);
    /* Legacy aliases (used widely; keep until Sprint 4) */
    --shadow-soft:  var(--shadow-xs);
    --shadow-hover: var(--shadow-md);
    --card-shadow:  var(--shadow-xl);

    /* ===== Typography scale ===== */
    --fs-xs:   0.72rem;
    --fs-sm:   0.82rem;
    --fs-base: 0.9rem;
    --fs-md:   1rem;
    --fs-lg:   1.15rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight: 1.2;
    --lh-base:  1.5;
    --lh-loose: 1.75;

    /* ===== Z-index scale ===== */
    --z-base:           1;
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-fixed:        300;
    --z-modal-backdrop: 400;
    --z-modal:        500;
    --z-popover:      600;
    --z-toast:        700;
    --z-tooltip:      800;
}

/* ===== Dark theme overrides ===== */
[data-theme="dark"] {
    /* Surfaces */
    --background-color: #0f172a;
    --surface-bg:       #111318;
    --surface-card:     #1a1d23;
    --surface-hover:    #23262d;

    /* Borders */
    --border-color:  #2a2d35;
    --border-light:  #1f2229;
    --border-strong: #3a3f4a;

    /* Text */
    --text-color:     #e2e8f0;
    --text-secondary: #9ca3af;
    --text-muted:     #94a3b8;
    --text-inverse:   #0f172a;

    /* Shadows are stronger on dark */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.40);
}