/*
 * CommerceDeck global design tokens.
 *
 * This file is the single source of truth for visual values shared by the
 * application UI, WordPress shell, Top Bar, Notification Center, Order
 * Workspace and native module integrations. Other stylesheets consume these
 * variables and must not introduce independent palettes.
 */
:root,
body.psas-theme-dark {
  --cd-color-bg:#0b1220;
  --cd-color-surface:#111827;
  --cd-color-surface-raised:#172033;
  --cd-color-surface-soft:#0f172a;
  --cd-color-surface-hover:#1e293b;
  --cd-color-border:#334155;
  --cd-color-border-strong:#475569;
  --cd-color-divider:rgba(71,85,105,.55);
  --cd-color-text:#f8fafc;
  --cd-color-text-soft:#e2e8f0;
  --cd-color-muted:#94a3b8;
  --cd-color-scrollbar-track:rgba(15,23,42,.72);
  --cd-color-scrollbar-thumb:#475569;
  --cd-color-scrollbar-thumb-hover:#64748b;
  --cd-color-on-accent:#ffffff;

  --cd-color-accent:#2563eb;
  --cd-color-accent-hover:#1d4ed8;
  --cd-color-accent-text:#60a5fa;
  --cd-color-accent-soft:rgba(37,99,235,.16);
  --cd-color-accent-wash:rgba(37,99,235,.09);
  --cd-color-accent-border-soft:rgba(96,165,250,.16);
  --cd-color-accent-border:rgba(96,165,250,.32);
  --cd-color-accent-border-strong:rgba(96,165,250,.48);
  --cd-color-accent-emphasis:rgba(96,165,250,.52);
  --cd-color-focus-ring:rgba(96,165,250,.30);
  --cd-color-row-hover:rgba(37,99,235,.06);

  --cd-color-success:#4ade80;
  --cd-color-success-soft:rgba(74,222,128,.12);
  --cd-color-success-border:rgba(74,222,128,.28);
  --cd-color-warning:#fbbf24;
  --cd-color-warning-soft:rgba(251,191,36,.13);
  --cd-color-warning-border:rgba(251,191,36,.30);
  --cd-color-danger:#fb7185;
  --cd-color-danger-soft:rgba(251,113,133,.12);
  --cd-color-danger-border:rgba(251,113,133,.30);
  --cd-color-danger-solid:#b91c1c;
  --cd-color-on-danger:#ffffff;
  --cd-color-info:#38bdf8;
  --cd-color-info-soft:rgba(56,189,248,.12);
  --cd-color-info-border:rgba(56,189,248,.30);

  --cd-color-toolbar:rgba(11,18,32,.94);
  --cd-color-overlay-soft:rgba(2,6,23,.42);
  --cd-color-overlay-strong:rgba(2,6,23,.66);
  --cd-color-code-bg:#020617;
  --cd-color-code-text:#cbd5e1;

  /* Inverse surfaces remain intentionally dark in both color modes. */
  --cd-color-inverse:#0f172a;
  --cd-color-inverse-surface:#111827;
  --cd-color-inverse-raised:#172554;
  --cd-color-inverse-text:#ffffff;
  --cd-color-inverse-text-soft:rgba(255,255,255,.66);
  --cd-color-inverse-muted:rgba(255,255,255,.72);
  --cd-color-inverse-muted-soft:rgba(255,255,255,.52);
  --cd-color-inverse-border:rgba(255,255,255,.12);
  --cd-color-inverse-border-soft:rgba(255,255,255,.08);
  --cd-color-inverse-border-medium:rgba(255,255,255,.14);
  --cd-color-inverse-border-strong:rgba(255,255,255,.34);
  --cd-color-inverse-border-action:rgba(255,255,255,.18);
  --cd-color-inverse-soft:rgba(255,255,255,.08);
  --cd-color-inverse-softer:rgba(255,255,255,.04);
  --cd-color-inverse-control:rgba(255,255,255,.09);
  --cd-color-inverse-control-hover:rgba(255,255,255,.16);
  --cd-color-inverse-chip:rgba(255,255,255,.075);
  --cd-color-inverse-status:rgba(255,255,255,.10);
  --cd-color-inverse-success-soft:rgba(22,163,74,.22);
  --cd-color-inverse-warning-soft:rgba(245,158,11,.22);
  --cd-color-inverse-danger-soft:rgba(239,68,68,.22);
  --cd-color-inverse-danger-border:rgba(248,113,113,.60);
  --cd-color-inverse-danger-strong:rgba(185,28,28,.36);
  --cd-color-inverse-icon-accent:#bfdbfe;
  --cd-color-inverse-focus:#60a5fa;
  --cd-color-inverse-focus-ring:rgba(37,99,235,.12);
  --cd-color-inverse-flash-ring:rgba(37,99,235,.20);
  --cd-color-inverse-note-ring:#dbeafe;

  --cd-shadow-sm:0 1px 2px rgba(2,6,23,.14);
  --cd-shadow-inverse-toolbar:0 10px 26px rgba(16,24,40,.12);
  --cd-shadow-md:0 16px 38px rgba(2,6,23,.28);
  --cd-shadow-lg:0 20px 52px rgba(2,6,23,.32);
  --cd-shadow-drawer:-20px 0 52px rgba(2,6,23,.26);

  --cd-radius-xs:6px;
  --cd-radius-sm:8px;
  --cd-radius-md:12px;
  --cd-radius-lg:16px;
  --cd-radius-xl:20px;
  --cd-radius-pill:999px;

  --cd-space-0-5:2px;
  --cd-space-1:4px;
  --cd-space-1-5:6px;
  --cd-space-2:8px;
  --cd-space-2-5:10px;
  --cd-space-3:12px;
  --cd-space-3-5:14px;
  --cd-space-4:16px;
  --cd-space-4-5:18px;
  --cd-space-5:20px;
  --cd-space-5-5:22px;
  --cd-space-6:24px;
  --cd-space-7:32px;
  --cd-space-8:40px;

  --cd-control-xs:30px;
  --cd-control-sm:32px;
  --cd-control-md:38px;
  --cd-control-lg:44px;
  --cd-control-mobile:42px;
  --cd-toolbar-desktop:32px;
  --cd-toolbar-mobile:46px;

  --cd-font-size-2xs:11px;
  --cd-font-size-xs:12px;
  --cd-font-size-caption:12px;
  --cd-font-size-sm:13px;
  --cd-font-size-md:14px;
  --cd-font-size-body:14px;
  --cd-font-size-card:15px;
  --cd-font-size-section:16px;
  --cd-font-size-subtitle:18px;
  --cd-font-size-heading:19px;
  --cd-font-size-title:28px;
  --cd-font-size-metric:24px;
  --cd-font-weight-medium:500;
  --cd-font-weight-semibold:650;
  --cd-font-weight-bold:720;
  --cd-font-weight-strong:760;
  --cd-font-weight-heavy:800;
  --cd-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;

  --cd-page-max:1680px;
  --cd-page-pad-y:24px;
  --cd-page-pad-x:clamp(16px,2.2vw,32px);

  /* Semantic layout geometry. These names describe the role of fixed
   * integration measurements so page and shell CSS do not depend on anonymous
   * numeric tokens for shared structures. */
  --cd-layout-side-rail:330px;
  --cd-layout-settings-rail:300px;
  --cd-layout-order-rail:300px;
  --cd-wp-adminbar-desktop:32px;
  --cd-wp-adminbar-mobile:46px;
  --cd-wp-sidebar-expanded:220px;
  --cd-wp-sidebar-collapsed:64px;
  --cd-wp-mobile-drawer:300px;
  --cd-wp-nav-item:48px;
  --cd-wp-nav-icon:18px;
  --cd-topbar-mark-size:20px;
  --cd-page-pad-bottom:40px;
  --cd-layout-gap:16px;
  --cd-content-gap:var(--cd-layout-gap);
  --cd-grid-gap:var(--cd-layout-gap);
  --cd-panel-gap:var(--cd-layout-gap);
  --cd-card-pad:16px;
  --cd-card-pad-sm:12px;
  --cd-action-gap:8px;
  --cd-opacity-disabled:.75;
  --cd-transition:120ms ease;

  /* CSS custom properties cannot drive @media conditions. These document the
   * responsive contract enforced by design-system, mobile-overflow and shell
   * regression audits: mobile <= 782, desktop >= 783, touch <= 1024,
   * wide <= 1180.
   */
  /* Exact geometry/type tokens for component-specific measurements that do
   * not belong to the primary scale. They remain centralized and auditable. */
  --cd-space-exact-1:1px;
  --cd-space-exact-3:3px;
  --cd-space-exact-5:5px;
  --cd-space-exact-7:7px;
  --cd-space-exact-9:9px;
  --cd-space-exact-11:11px;
  --cd-space-exact-13:13px;
  --cd-space-exact-15:15px;
  --cd-space-exact-17:17px;
  --cd-space-exact-26:26px;
  --cd-space-exact-28:28px;
  --cd-space-exact-34:34px;
  --cd-space-exact-42:42px;
  --cd-font-size-exact-9:9px;
  --cd-font-size-exact-17:17px;
  --cd-font-size-exact-22:22px;
  --cd-font-size-exact-25:25px;
  --cd-font-weight-exact-700:700;
  --cd-font-weight-exact-750:750;
  --cd-radius-exact-7:7px;
  --cd-radius-exact-8:8px;
  --cd-radius-exact-9:9px;
  --cd-radius-exact-10:10px;

  --cd-space-exact-36:36px;
  --cd-space-exact-64:64px;
  --cd-space-exact-82:82px;
  --cd-space-exact-247:247px;
  --cd-font-size-exact-20:20px;
  --cd-font-size-exact-24:24px;
  --cd-font-size-exact-46:46px;
  --cd-font-weight-exact-780:780;
  --cd-radius-exact-5:5px;
  --cd-radius-exact-11:11px;
  --cd-radius-exact-13:13px;
  --cd-radius-exact-14:14px;
  /* Canonical fixed geometry scale. All non-responsive pixel geometry outside
   * this file resolves through these tokens. */
  --cd-size-1:1px;
  --cd-size-negative-1:-1px;
  --cd-size-1-5:1.5px;
  --cd-size-2:2px;
  --cd-size-3:3px;
  --cd-size-4:4px;
  --cd-size-5:5px;
  --cd-size-6:6px;
  --cd-size-7:7px;
  --cd-size-8:8px;
  --cd-size-9:9px;
  --cd-size-10:10px;
  --cd-size-12:12px;
  --cd-size-13:13px;
  --cd-size-14:14px;
  --cd-size-15:15px;
  --cd-size-16:16px;
  --cd-size-17:17px;
  --cd-size-18:18px;
  --cd-size-19:19px;
  --cd-size-20:20px;
  --cd-size-22:22px;
  --cd-size-23:23px;
  --cd-size-24:24px;
  --cd-size-25:25px;
  --cd-size-26:26px;
  --cd-size-28:28px;
  --cd-size-30:30px;
  --cd-size-31:31px;
  --cd-size-32:32px;
  --cd-size-34:34px;
  --cd-size-36:36px;
  --cd-size-38:38px;
  --cd-size-40:40px;
  --cd-size-42:42px;
  --cd-size-44:44px;
  --cd-size-46:46px;
  --cd-size-48:48px;
  --cd-size-50:50px;
  --cd-size-52:52px;
  --cd-size-54:54px;
  --cd-size-64:64px;
  --cd-size-72:72px;
  --cd-size-74:74px;
  --cd-size-76:76px;
  --cd-size-78:78px;
  --cd-size-86:86px;
  --cd-size-90:90px;
  --cd-size-96:96px;
  --cd-size-104:104px;
  --cd-size-105:105px;
  --cd-size-108:108px;
  --cd-size-110:110px;
  --cd-size-115:115px;
  --cd-size-118:118px;
  --cd-size-120:120px;
  --cd-size-124:124px;
  --cd-size-128:128px;
  --cd-size-130:130px;
  --cd-size-135:135px;
  --cd-size-145:145px;
  --cd-size-150:150px;
  --cd-size-160:160px;
  --cd-size-180:180px;
  --cd-size-190:190px;
  --cd-size-200:200px;
  --cd-size-210:210px;
  --cd-size-220:220px;
  --cd-size-240:240px;
  --cd-size-247:247px;
  --cd-size-250:250px;
  --cd-size-260:260px;
  --cd-size-280:280px;
  --cd-size-290:290px;
  --cd-size-300:300px;
  --cd-size-320:320px;
  --cd-size-330:330px;
  --cd-size-340:340px;
  --cd-size-360:360px;
  --cd-size-420:420px;
  --cd-size-430:430px;
  --cd-size-440:440px;
  --cd-size-460:460px;
  --cd-size-520:520px;
  --cd-size-560:560px;
  --cd-size-640:640px;
  --cd-size-660:660px;
  --cd-size-680:680px;
  --cd-size-720:720px;
  --cd-size-760:760px;
  --cd-size-820:820px;
  --cd-size-860:860px;
  --cd-size-900:900px;
  --cd-size-940:940px;
  --cd-size-1000:1000px;
  --cd-size-1050:1050px;

  --cd-breakpoint-mobile:782px;
  --cd-breakpoint-desktop:783px;
  --cd-breakpoint-touch:1024px;
  --cd-breakpoint-wide:1180px;
  --cd-shell-menu-bg:var(--cd-color-surface-soft);
  --cd-shell-menu-text:var(--cd-color-code-text);
  --cd-shell-menu-hover-bg:var(--cd-color-surface-hover);
  --cd-shell-menu-hover-text:var(--cd-color-text);
  --cd-shell-active-bg:var(--cd-color-accent-wash);
  --cd-shell-active-text:var(--cd-color-text);
  --cd-shell-active-indicator:var(--cd-color-accent-text);
  --cd-shell-submenu-bg:var(--cd-color-surface);
  --cd-shell-submenu-text:var(--cd-color-muted);
  --cd-shell-border:var(--cd-color-border);
  --cd-shell-icon:var(--cd-color-muted);
  --cd-shell-arrow-bg:var(--cd-color-bg);
  --cd-shell-focus-border:rgba(96,165,250,.28);
  --cd-shell-focus-border-strong:rgba(96,165,250,.46);
  --cd-shell-separator:rgba(154,165,209,.34);
  --cd-shell-separator-mobile:rgba(148,163,184,.48);
  --cd-shell-separator-mobile-accent:rgba(96,165,250,.72);
  --cd-shell-separator-glint:rgba(255,255,255,.03);
  --cd-shell-drawer-overlay:rgba(2,6,23,.52);
  --cd-shell-accent-shadow:rgba(37,99,235,.22);
  --cd-shell-accent-shadow-strong:rgba(37,99,235,.28);
  --cd-shell-card-shadow:rgba(5,8,20,.28);
  --cd-topbar-bg:var(--cd-color-surface-soft);
  --cd-topbar-text:var(--cd-color-text-soft);
  --cd-topbar-hover-bg:var(--cd-color-surface-hover);
  --cd-topbar-hover-text:var(--cd-color-text);
  --cd-topbar-border:var(--cd-color-border);
  --cd-topbar-accent:var(--cd-color-accent-text);
  --cd-topbar-mark-text:var(--cd-color-inverse-text);

}

body.psas-theme-light {
  --cd-color-bg:#f8fafc;
  --cd-color-surface:#ffffff;
  --cd-color-surface-raised:#f8fafc;
  --cd-color-surface-soft:#f1f5f9;
  --cd-color-surface-hover:#e2e8f0;
  --cd-color-border:#e2e8f0;
  --cd-color-border-strong:#cbd5e1;
  --cd-color-divider:rgba(148,163,184,.46);
  --cd-color-text:#0f172a;
  --cd-color-text-soft:#334155;
  --cd-color-muted:#475569;
  --cd-color-scrollbar-track:rgba(226,232,240,.82);
  --cd-color-scrollbar-thumb:#94a3b8;
  --cd-color-scrollbar-thumb-hover:#64748b;

  --cd-color-accent:#1d4ed8;
  --cd-color-accent-hover:#1e40af;
  --cd-color-accent-text:#1d4ed8;
  --cd-color-accent-soft:rgba(29,78,216,.10);
  --cd-color-accent-wash:rgba(29,78,216,.06);
  --cd-color-accent-border-soft:rgba(29,78,216,.14);
  --cd-color-accent-border:rgba(29,78,216,.28);
  --cd-color-accent-border-strong:rgba(29,78,216,.44);
  --cd-color-accent-emphasis:rgba(29,78,216,.46);
  --cd-color-focus-ring:rgba(29,78,216,.20);
  --cd-color-row-hover:rgba(29,78,216,.035);

  --cd-color-success:#166534;
  --cd-color-success-soft:rgba(22,101,52,.09);
  --cd-color-success-border:rgba(22,101,52,.24);
  --cd-color-warning:#92400e;
  --cd-color-warning-soft:rgba(146,64,14,.09);
  --cd-color-warning-border:rgba(146,64,14,.24);
  --cd-color-danger:#b91c1c;
  --cd-color-danger-soft:rgba(185,28,28,.08);
  --cd-color-danger-border:rgba(185,28,28,.24);
  --cd-color-info:#0369a1;
  --cd-color-info-soft:rgba(3,105,161,.08);
  --cd-color-info-border:rgba(3,105,161,.24);

  --cd-color-toolbar:rgba(248,250,252,.96);
  --cd-color-overlay-soft:rgba(15,23,42,.24);
  --cd-color-overlay-strong:rgba(15,23,42,.42);
  --cd-color-code-bg:#f1f5f9;
  --cd-color-code-text:#334155;

  --cd-shadow-sm:0 1px 2px rgba(15,23,42,.045);
  --cd-shadow-md:0 16px 38px rgba(15,23,42,.10);
  --cd-shadow-lg:0 20px 52px rgba(15,23,42,.14);
  --cd-shadow-drawer:-20px 0 52px rgba(15,23,42,.18);
  --cd-shell-menu-bg:var(--cd-color-surface);
  --cd-shell-menu-text:var(--cd-color-text-soft);
  --cd-shell-menu-hover-bg:var(--cd-color-surface-soft);
  --cd-shell-menu-hover-text:var(--cd-color-text);
  --cd-shell-active-bg:var(--cd-color-accent-soft);
  --cd-shell-active-text:var(--cd-color-text);
  --cd-shell-active-indicator:var(--cd-color-accent);
  --cd-shell-submenu-bg:var(--cd-color-bg);
  --cd-shell-submenu-text:var(--cd-color-muted);
  --cd-shell-border:var(--cd-color-border);
  --cd-shell-icon:var(--cd-color-muted);
  --cd-shell-arrow-bg:var(--cd-color-surface-soft);
  --cd-shell-focus-border:var(--cd-color-accent-border);
  --cd-shell-focus-border-strong:var(--cd-color-accent-border-strong);
  --cd-shell-separator:var(--cd-color-divider);
  --cd-shell-separator-mobile:var(--cd-color-divider);
  --cd-shell-separator-mobile-accent:var(--cd-color-accent-emphasis);
  --cd-shell-separator-glint:var(--cd-color-inverse-softer);
  --cd-shell-drawer-overlay:var(--cd-color-overlay-strong);
  --cd-shell-accent-shadow:var(--cd-color-accent-soft);
  --cd-shell-accent-shadow-strong:var(--cd-color-accent-border);
  --cd-shell-card-shadow:rgba(15,23,42,.18);
  --cd-topbar-bg:var(--cd-color-surface);
  --cd-topbar-text:var(--cd-color-text-soft);
  --cd-topbar-hover-bg:var(--cd-color-surface-soft);
  --cd-topbar-hover-text:var(--cd-color-text);
  --cd-topbar-border:var(--cd-color-border);
  --cd-topbar-accent:var(--cd-color-accent);
  --cd-topbar-mark-text:var(--cd-color-inverse-text);

}