/*
Theme Name: TotalScreen
Theme URI: https://totalscreen.app
Author: ZORDERZ
Author URI: https://zorderz.com
Description: Mobile-first Field OS theme for the Screen Enclosure & Solar Panel industry. Features plugin auto-discovery with inline dashboard widgets (v2.0), 4-theme system (Light/Dark/System/Sunlight WCAG AAA), SPA architecture, role-based dashboard layouts with live KPI metrics from FreshBooks/Nutshell (v2.9.0), interactive KPI deep-links to Sales Analytics (v2.10.1), admin-editable review counts, user-facing ladybug bug reporter (v2.7.0+), fixed WP Admin User Management (v2.10.0), backend infrastructure for user goals & personal records (v2.13.0), View-As role switcher relocated to WP Admin Bar (v2.14.0), full-width opt-out for chat-style sub-views (v2.14.0), unified nav breakpoints & design-token compliance (v2.14.1), sticky header fix & WP Engine performance (v2.14.2), FOUC prevention & design-token sweep (v2.14.3), big-touch 2-col app dock, horizontal scroll lock, sales KPI data wiring (v2.14.4.3), mobile text size boost, header bleed fix, larger app tiles, deferred asset loading (v2.14.5), TS Game deferred/lazy asset integration and gameAvailable SPA flag (v2.14.6), self-hosted fonts & Lucide, app shell skeleton screen, service worker offline caching, boot error recovery (v2.15.0), salesperson territory context for AI pipeline queries, external link handling for iOS PWA (v2.15.1), and AI-powered workflow tools.
Version: 2.15.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: totalscreen
Tags: mobile-first, one-column, custom-colors, custom-logo, full-width-template, theme-options
*/

/* ================================================================
   TOTALSCREEN TOOLS V6 — DESIGN SYSTEM
   3-Tier Token Architecture: Primitive → Semantic → Component
   ================================================================ */

/* ---- TIER 1: Primitive Tokens ---- */
:root {
  --ref-brand-50:#EBF5FF;--ref-brand-100:#D6EBFF;--ref-brand-200:#ADCFFF;
  --ref-brand-300:#7AB3FF;--ref-brand-400:#4796F7;--ref-brand-500:#2C5F8A;
  --ref-brand-600:#1E3A5F;--ref-brand-700:#162D4A;--ref-brand-800:#0F1F35;
  --ref-brand-900:#091526;--ref-brand-950:#050D18;
  --ref-gray-0:#FFFFFF;--ref-gray-50:#F8FAFC;--ref-gray-100:#F1F5F9;
  --ref-gray-200:#E2E8F0;--ref-gray-300:#CBD5E1;--ref-gray-400:#94A3B8;
  --ref-gray-500:#64748B;--ref-gray-600:#475569;--ref-gray-700:#334155;
  --ref-gray-800:#1E293B;--ref-gray-900:#0F172A;--ref-gray-950:#020617;
  --ref-green-500:#10B981;--ref-green-600:#059669;
  --ref-amber-500:#F59E0B;--ref-amber-600:#D97706;
  --ref-red-500:#EF4444;--ref-red-600:#DC2626;
  --ref-space-1:4px;--ref-space-2:8px;--ref-space-3:12px;--ref-space-4:16px;
  --ref-space-5:20px;--ref-space-6:24px;--ref-space-8:32px;--ref-space-10:40px;
  --ref-space-12:48px;--ref-space-16:64px;--ref-space-20:80px;
  --ref-radius-xs:4px;--ref-radius-sm:8px;--ref-radius-md:12px;
  --ref-radius-lg:16px;--ref-radius-xl:20px;--ref-radius-2xl:28px;--ref-radius-full:9999px;
  --ref-font-xs:15px;--ref-font-sm:17px;--ref-font-base:19px;--ref-font-md:22px;
  --ref-font-lg:25px;--ref-font-xl:30px;--ref-font-2xl:34px;--ref-font-3xl:42px;
  --ref-dur-fast:150ms;--ref-dur-norm:250ms;--ref-dur-slow:350ms;
  --ref-ease:cubic-bezier(.4,0,.2,1);--ref-ease-out:cubic-bezier(0,0,.2,1);
  --ref-ease-spring:cubic-bezier(.32,.72,0,1);
  /* Category Colors (v2.14.1) */
  --cat-sales:#7C3AED;--cat-finance:#059669;--cat-service:#2563EB;
  --cat-field:#EA580C;--cat-admin:#DC2626;
  --cat-ops:#0891B2;--cat-team:#DB2777;
}

/* ---- TIER 2: Semantic Tokens — LIGHT (default) ---- */
:root, :root[data-theme="light"] {
  --sys-bg:var(--ref-gray-50);--sys-bg-alt:var(--ref-gray-100);
  --sys-surface:var(--ref-gray-0);--sys-surface-raised:#F8FAFC;
  /* v2.14.0: surface-raised is now slate-50 (one step from base white surface)
     so plugins relying on a real one-step elevation — alternating rows,
     skeleton shimmer gradients, card-on-card patterns — render the same in
     light mode as they already do in dark/system. Pre-2.14 this resolved
     to var(--ref-gray-0) (=#FFFFFF), giving zero contrast against surface. */
  --sys-surface-blur:rgba(255,255,255,.82);
  --sys-surface-subtle:rgba(0,0,0,.03);
  --sys-text:var(--ref-gray-900);--sys-text-sec:var(--ref-gray-600);
  --sys-text-ter:var(--ref-gray-500);--sys-text-inv:var(--ref-gray-0);
  --sys-text-brand:var(--ref-gray-0);
  --sys-border:var(--ref-gray-200);--sys-border-strong:var(--ref-gray-300);
  --sys-brand:var(--ref-brand-500);--sys-brand-light:var(--ref-brand-50);
  --sys-brand-hover:var(--ref-brand-600);--sys-brand-dark:var(--ref-brand-700);
  --sys-success:var(--ref-green-500);--sys-warning:var(--ref-amber-500);--sys-error:var(--ref-red-500);
  --sys-overlay:rgba(0,0,0,.45);
  --sys-shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --sys-shadow-md:0 4px 12px rgba(0,0,0,.1);
  --sys-shadow-lg:0 12px 32px rgba(0,0,0,.12);
  --sys-shadow-xl:0 24px 48px rgba(0,0,0,.16);
  --sys-icon-wt:1.75;--sys-font-wt:400;--sys-font-wt-md:500;
  --sys-font-wt-sb:600;--sys-font-wt-b:700;
  --sys-focus:0 0 0 3px var(--ref-brand-200);
  --sys-topbar-bg:var(--ref-brand-700);--sys-topbar-text:var(--ref-gray-0);
}

/* ---- DARK ---- */
:root[data-theme="dark"] {
  --sys-bg:var(--ref-gray-950);--sys-bg-alt:var(--ref-gray-900);
  --sys-surface:var(--ref-gray-800);--sys-surface-raised:var(--ref-gray-700);
  --sys-surface-blur:rgba(30,41,59,.82);
  --sys-surface-subtle:rgba(255,255,255,.05);
  --sys-text:var(--ref-gray-100);--sys-text-sec:var(--ref-gray-400);
  --sys-text-ter:var(--ref-gray-500);--sys-text-inv:var(--ref-gray-900);
  --sys-text-brand:var(--ref-gray-0);
  --sys-border:var(--ref-gray-700);--sys-border-strong:var(--ref-gray-600);
  --sys-brand:var(--ref-brand-400);--sys-brand-light:var(--ref-brand-900);
  --sys-brand-hover:var(--ref-brand-300);--sys-brand-dark:var(--ref-brand-200);
  --sys-success:var(--ref-green-500);--sys-warning:var(--ref-amber-500);--sys-error:var(--ref-red-500);
  --sys-overlay:rgba(0,0,0,.65);
  --sys-shadow-sm:0 1px 3px rgba(0,0,0,.25);
  --sys-shadow-md:0 4px 12px rgba(0,0,0,.3);
  --sys-shadow-lg:0 12px 32px rgba(0,0,0,.4);
  --sys-shadow-xl:0 24px 48px rgba(0,0,0,.5);
  --sys-icon-wt:1.75;--sys-font-wt:400;--sys-font-wt-md:500;
  --sys-font-wt-sb:600;--sys-font-wt-b:700;
  --sys-focus:0 0 0 3px var(--ref-brand-800);
  --sys-topbar-bg:var(--ref-gray-900);--sys-topbar-text:var(--ref-gray-100);
}

/* ---- SUNLIGHT (WCAG AAA — 21:1) ---- */
:root[data-theme="sunlight"] {
  --sys-bg:#FFFFFF;--sys-bg-alt:#FFFFFF;
  --sys-surface:#FFFFFF;--sys-surface-raised:#F1F5F9;
  /* v2.14.0: surface-raised lifted to slate-100 (a touch more contrast than
     light theme to suit Sunlight's high-vis baseline) so alternating rows
     and elevation gradients are still perceptible without compromising
     21:1 text contrast. */
  --sys-surface-blur:rgba(255,255,255,.95);
  --sys-surface-subtle:rgba(0,0,0,.04);
  --sys-text:#000000;--sys-text-sec:#000000;
  --sys-text-ter:#1a1a1a;--sys-text-inv:#FFFFFF;
  --sys-text-brand:#FFFFFF;
  --sys-border:#000000;--sys-border-strong:#000000;
  --sys-brand:#000000;--sys-brand-light:#E0E0E0;
  --sys-brand-hover:#222222;--sys-brand-dark:#000000;
  --sys-success:#000000;--sys-warning:#000000;--sys-error:#000000;
  --sys-overlay:rgba(0,0,0,.75);
  --sys-shadow-sm:none;--sys-shadow-md:none;--sys-shadow-lg:none;--sys-shadow-xl:none;
  --sys-icon-wt:3;--sys-font-wt:600;--sys-font-wt-md:700;
  --sys-font-wt-sb:800;--sys-font-wt-b:900;
  --sys-focus:0 0 0 4px #000;
  --sys-topbar-bg:#000000;--sys-topbar-text:#FFFFFF;
}

/* ---- SYSTEM (auto) ---- */
@media(prefers-color-scheme:dark){
:root[data-theme="system"]{
  --sys-bg:var(--ref-gray-950);--sys-bg-alt:var(--ref-gray-900);
  --sys-surface:var(--ref-gray-800);--sys-surface-raised:var(--ref-gray-700);
  --sys-surface-blur:rgba(30,41,59,.82);
  --sys-surface-subtle:rgba(255,255,255,.05);
  --sys-text:var(--ref-gray-100);--sys-text-sec:var(--ref-gray-400);
  --sys-text-ter:var(--ref-gray-500);--sys-text-inv:var(--ref-gray-900);
  --sys-text-brand:var(--ref-gray-0);
  --sys-border:var(--ref-gray-700);--sys-border-strong:var(--ref-gray-600);
  --sys-brand:var(--ref-brand-400);--sys-brand-light:var(--ref-brand-900);
  --sys-brand-hover:var(--ref-brand-300);--sys-brand-dark:var(--ref-brand-200);
  --sys-success:var(--ref-green-500);--sys-warning:var(--ref-amber-500);--sys-error:var(--ref-red-500);
  --sys-overlay:rgba(0,0,0,.65);
  --sys-shadow-sm:0 1px 3px rgba(0,0,0,.25);--sys-shadow-md:0 4px 12px rgba(0,0,0,.3);
  --sys-shadow-lg:0 12px 32px rgba(0,0,0,.4);--sys-shadow-xl:0 24px 48px rgba(0,0,0,.5);
  --sys-icon-wt:1.75;--sys-font-wt:400;--sys-font-wt-md:500;
  --sys-font-wt-sb:600;--sys-font-wt-b:700;
  --sys-focus:0 0 0 3px var(--ref-brand-800);
  --sys-topbar-bg:var(--ref-gray-900);--sys-topbar-text:var(--ref-gray-100);
}}

/* === RESPONSIVE TYPOGRAPHY v2.12.5 === */
/* TABLET (≥600px) — iPad mini portrait, small tablets */
@media (min-width: 600px) {
  :root {
    --ref-font-xs:   16px;
    --ref-font-sm:   18px;
    --ref-font-base: 21px;
    --ref-font-md:   24px;
    --ref-font-lg:   29px;
    --ref-font-xl:   34px;
    --ref-font-2xl:  40px;
    --ref-font-3xl:  48px;
    --ref-space-3: 14px;
    --ref-space-4: 18px;
    --ref-space-5: 24px;
    --ref-space-6: 28px;
  }
}
/* iPad Pro 11"/13" portrait + landscape */
@media (min-width: 900px) {
  :root {
    --ref-font-xs:   16px;
    --ref-font-sm:   19px;
    --ref-font-base: 22px;
    --ref-font-md:   26px;
    --ref-font-lg:   31px;
    --ref-font-xl:   37px;
    --ref-font-2xl:  44px;
    --ref-font-3xl:  54px;
  }
}
@media (min-width: 1280px) {
  :root {
    --ref-font-xs:   16px;
    --ref-font-sm:   19px;
    --ref-font-base: 22px;
    --ref-font-md:   26px;
    --ref-font-lg:   32px;
    --ref-font-xl:   38px;
    --ref-font-2xl:  46px;
    --ref-font-3xl:  56px;
    --ref-space-3: 16px;
    --ref-space-4: 22px;
    --ref-space-5: 30px;
    --ref-space-6: 38px;
  }
}
@media (min-width: 1680px) {
  :root {
    --ref-font-xs:   17px;
    --ref-font-sm:   20px;
    --ref-font-base: 24px;
    --ref-font-md:   28px;
    --ref-font-lg:   34px;
    --ref-font-xl:   42px;
    --ref-font-2xl:  52px;
    --ref-font-3xl:  64px;
  }
}
@media (min-width: 2400px) {
  :root {
    --ref-font-xs:   20px;
    --ref-font-sm:   24px;
    --ref-font-base: 28px;
    --ref-font-md:   34px;
    --ref-font-lg:   42px;
    --ref-font-xl:   52px;
    --ref-font-2xl:  62px;
    --ref-font-3xl:  78px;
  }
}
/* === END RESPONSIVE TYPOGRAPHY === */