/* ==========================================================
   DEFAULT THEME -- design tokens only.

   This file defines CSS custom properties (colors, typography,
   radius, shadows, a few transition durations) -- it never
   defines a single component rule (.button{...}, .card{...}).
   Every component stylesheet in admin/css/ and configurator/css/
   reads these tokens via var(--...) instead of hardcoding a
   value; a future customer Theme (ABB, Hager, Schneider, Eaton,
   Legrand, Siemens, ...) is a sibling theme.css that overrides
   whichever of these variables it wants to change -- nothing
   else in the application needs to know a new Theme exists.

   Loaded via shared/theme/ThemeLoader.js (never read directly by
   a UI component) -- see shared/theme/ThemeManager.js for the
   single entry point every consumer actually calls.

   VALUES BELOW ARE EXACTLY THE PRE-REFACTOR HARDCODED VALUES.
   This task's goal is zero visual change -- every var() below
   was chosen to reproduce an existing literal byte-for-byte, not
   to redesign the palette. Where the pre-existing CSS already
   used two (or more) subtly different shades for what looks like
   the same role, both are kept as distinct tokens rather than
   silently merged -- merging them would be a visual change, which
   is explicitly out of scope here.
========================================================== */

:root{

    /* ==========================================================
       COLOR -- BRAND / PRIMARY
    ========================================================== */

    --color-primary:#2563eb;
    --color-primary-hover:#1d4ed8;
    --color-primary-alt:#3b82f6;
    --color-primary-border-hover:#93c5fd;

    /* ==========================================================
       COLOR -- NEUTRAL GRAY SCALE (cool/zinc family -- the
       dominant scale used by the Configurator app and most of
       Admin's Products/Configurators screens)
    ========================================================== */

    --color-gray-900:#111827;
    --color-gray-800:#1f2937;
    --color-gray-700:#374151;
    --color-gray-600:#4b5563;
    --color-gray-500:#6b7280;
    --color-gray-400:#9ca3af;
    --color-gray-300:#d1d5db;
    --color-gray-250:#d9dce3;
    --color-gray-200:#e5e7eb;
    --color-gray-150:#ececec;
    --color-gray-100:#f3f4f6;
    --color-gray-75:#f8fafc;
    --color-gray-50:#f9fafb;
    --color-white:#ffffff;

    /* ==========================================================
       COLOR -- SLATE SCALE (Admin's Dashboard/Modal/Questions/
       Import screens use this separate, slightly blue-tinted
       neutral family alongside the gray scale above -- kept
       distinct since the two scales render visibly differently
       side by side)
    ========================================================== */

    --color-slate-900:#0f172a;
    --color-slate-700:#334155;
    --color-slate-600:#475569;
    --color-slate-500:#64748b;
    --color-slate-400:#94a3b8;
    --color-slate-300:#cbd5e1;
    --color-slate-200:#e2e8f0;
    --color-slate-100:#f1f5f9;

    /* ==========================================================
       COLOR -- "MIST" (very light blue-gray one-offs)

       These are pre-existing near-duplicates of each other and of
       the slate scale above -- almost certainly organic drift
       across different Admin screens built at different times
       rather than a deliberate palette. Each is still its own
       token (never merged into a neighbor) because merging any
       two of them would be a visual change, which this task
       explicitly does not do. A future palette cleanup (reducing
       these to one or two shades) is a separate, deliberate task.
    ========================================================== */

    --color-mist-1:#eef2f7;
    --color-mist-2:#e8edf3;
    --color-mist-3:#dbe3ef;
    --color-mist-4:#dbe2ea;
    --color-mist-5:#cfd8e5;
    --color-mist-6:#f3f5f8;
    --color-mist-7:#eceff3;
    --color-mist-8:#eef1f6;
    --color-mist-9:#f4f6f9;
    --color-mist-10:#f4f6fb;
    --color-mist-11:#f0f1f3;
    --color-mist-12:#fafbfc;
    --color-mist-13:#f0f6ff;
    --color-mist-14:#dbeafe;
    --color-mist-15:#c7d2fe;
    --color-mist-16:#c9cdd5;
    --color-mist-17:#dcdcdc;
    --color-mist-18:#fafafa;
    --color-mist-19:#d9d9d9;

    /* ==========================================================
       COLOR -- TEXT (semantic aliases onto the scales above, for
       readability at call sites)
    ========================================================== */

    --color-text:var(--color-gray-900);
    --color-text-heading:var(--color-slate-900);
    --color-text-secondary:var(--color-gray-700);
    --color-text-tertiary:var(--color-gray-600);
    --color-text-muted:var(--color-gray-500);
    --color-text-subtle:var(--color-gray-400);
    --color-text-inverse:var(--color-white);
    --color-text-faint:#777;
    --color-text-faint-alt:#5b6573;

    /* ==========================================================
       COLOR -- BORDERS
    ========================================================== */

    --color-border:var(--color-gray-200);
    --color-border-strong:var(--color-gray-300);
    --color-border-input:var(--color-gray-250);
    --color-border-subtle:var(--color-gray-150);
    --color-border-header:#e5e5e5;

    /* ==========================================================
       COLOR -- BACKGROUNDS
    ========================================================== */

    --color-bg:var(--color-white);
    --color-bg-subtle:var(--color-gray-50);
    --color-bg-hover:var(--color-gray-75);
    --color-bg-hover-alt:var(--color-gray-100);
    --color-bg-primary-subtle:#eff6ff;
    --color-bg-page:#f4f4f4;
    --color-bg-app:#f4f6f9;
    --color-bg-workspace:#eaeaea;

    /* ==========================================================
       COLOR -- DANGER / ERROR
    ========================================================== */

    --color-danger:#dc2626;
    --color-danger-alt:#ef4444;
    --color-danger-text:#b91c1c;
    --color-danger-bg:#fef2f2;
    --color-danger-bg-strong:#fee2e2;
    --color-danger-bg-alt:#fff5f5;
    --color-danger-border:#fca5a5;
    --color-danger-border-alt:#fecaca;

    /* ==========================================================
       COLOR -- SUCCESS
    ========================================================== */

    --color-success:#16a34a;
    --color-success-alt:#22c55e;
    --color-success-text:#15803d;
    --color-success-bg:#f0fdf4;
    --color-success-bg-strong:#dcfce7;
    --color-success-border:#86efac;
    --color-success-border-alt:#bbf7d0;

    /* ==========================================================
       COLOR -- WARNING
    ========================================================== */

    --color-warning:#facc15;
    --color-warning-text:#b45309;
    --color-warning-bg:#fffbeb;
    --color-warning-border:#fde68a;

    /* ==========================================================
       COLOR -- MISC
    ========================================================== */

    --color-scrollbar-thumb:#cfcfcf;
    --color-scrollbar-thumb-hover:#b5b5b5;

    /* ==========================================================
       RADIUS
    ========================================================== */

    --radius-xs:6px;
    --radius-sm:8px;
    --radius-md:10px;
    --radius-lg:12px;
    --radius-xl:14px;
    --radius-2xl:16px;
    --radius-3xl:18px;
    --radius-4xl:20px;
    --radius-pill:100px;
    --radius-full:999px;

    /* ==========================================================
       SHADOW
    ========================================================== */

    --shadow-xs:0 1px 2px rgba(15,23,42,.06);
    --shadow-xs-alt:0 1px 3px rgba(0,0,0,.25);
    --shadow-sm:0 2px 6px rgba(0,0,0,.05);
    --shadow-sm-alt:0 2px 8px rgba(0,0,0,.04);
    --shadow-sm-alt2:0 2px 8px rgba(0,0,0,.05);
    --shadow-focus-primary:0 0 0 3px rgba(37,99,235,.12);
    --shadow-focus-primary-strong:0 0 0 3px rgba(37,99,235,.15);
    --shadow-md:0 4px 16px rgba(0,0,0,.12);
    --shadow-md-primary:0 4px 10px rgba(37,99,235,.25);
    --shadow-md-slate:0 8px 20px rgba(15,23,42,.06);
    --shadow-card-app:0 4px 18px rgba(0,0,0,.06);
    --shadow-lg:0 8px 24px rgba(0,0,0,.12);
    --shadow-lg-primary:0 10px 24px rgba(37,99,235,.14);
    --shadow-xl:0 12px 32px rgba(0,0,0,.16);
    --shadow-xl-slate:0 16px 40px rgba(15,23,42,.18);
    --shadow-xl-alt:0 18px 40px rgba(0,0,0,.18);
    --shadow-2xl:0 24px 64px rgba(0,0,0,.35);
    --shadow-2xl-slate:0 24px 60px rgba(15,23,42,.18);
    --shadow-2xl-alt:0 25px 60px rgba(0,0,0,.18);
    --shadow-2xl-slate-alt:0 25px 60px rgba(15,23,42,.18);
    --shadow-inset-active:inset 3px 0 0 var(--color-primary);
    --shadow-runtime-card:0 8px 30px rgba(0,0,0,.08);

    /* ==========================================================
       TYPOGRAPHY

       Admin and the Configurator app have always used two
       different font stacks -- kept as two separate tokens rather
       than unified, since unifying them would be a visible change.
       Font sizes stay mostly hardcoded per component (many are
       one-off, hand-tuned half-pixel values like 11.5px/12.5px/
       13.5px) -- only the common, round-number sizes that already
       recur across components are promoted to a scale here.
    ========================================================== */

    --font-family-base:Arial, Helvetica, sans-serif;
    --font-family-admin:Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --font-family-wizard:Inter, Arial, sans-serif;

    --font-size-xs:11px;
    --font-size-sm:12px;
    --font-size-base:13px;
    --font-size-md:14px;
    --font-size-lg:15px;
    --font-size-xl:16px;
    --font-size-2xl:18px;
    --font-size-3xl:20px;

    /* ==========================================================
       TRANSITIONS -- durations only. Left as bare durations
       (transition:var(--duration-fast)) wherever the original
       declaration was itself just a bare duration (CSS defaults
       transition-property to "all" and the timing function to
       "ease" in that case, exactly matching the pre-refactor
       behaviour) -- multi-part transitions that already named
       specific properties/easings/multiple values are left as
       literal strings rather than forced onto this scale.
    ========================================================== */

    --duration-fast:.15s;
    --duration-base:.18s;
    --duration-slow:.2s;
    --duration-slower:.3s;

    /* ==========================================================
       SIDEBAR / DEVICE LIBRARY -- promoted out of
       configurator/css/deviceLibrary.css so a Theme can adjust the
       sidebar's spacing/sizing without a second copy of that
       stylesheet. Values below are exactly the pre-existing
       hardcoded numbers (zero visual change here); AMKElektroTheme
       is the first Theme to actually change any of them.
    ========================================================== */

    --sidebar-header-padding:14px 14px 0 14px;
    --sidebar-header-font-size:15px;
    --sidebar-search-wrap-padding:12px;
    --sidebar-search-height:40px;
    --sidebar-search-padding-x:14px;
    --sidebar-filters-padding:0 12px 12px 12px;
    --sidebar-filter-select-height:34px;
    --sidebar-filter-label-tracking:.03em;
    --sidebar-list-gap:10px;
    --sidebar-properties-padding:14px;
    --sidebar-panel-bg:var(--color-white);
    --sidebar-header-text-color:var(--color-gray-900);
    --sidebar-filter-label-color:var(--color-gray-600);
    --sidebar-properties-border-color:var(--color-gray-200);
    --sidebar-filters-bg:transparent;
    --sidebar-detail-card-bg:transparent;
    --sidebar-detail-card-radius:0;
    --sidebar-detail-card-padding:0;
    --sidebar-detail-card-shadow:none;
    --sidebar-detail-card-flex:0 1 auto;
    --sidebar-control-shadow:none;
    --product-card-shadow:none;
    --product-card-shadow-hover:none;
    --sidebar-detail-card-border:none;

}