/* SaleGo UI Runtime Tokens — Phase 0/1 lock
   Source of truth for design primitives and semantic tokens.
   Do not hardcode colors, spacing, radius, shadow in page CSS. */

:root{
  /* Typography */
  --sg-font-family: Inter, "Segoe UI", Arial, sans-serif;
  --sg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sg-font-size-display: 32px;
  --sg-font-size-title: 22px;
  --sg-font-size-subtitle: 16px;
  --sg-font-size-body: 15px;
  --sg-font-size-caption: 12px;
  --sg-line-height-tight: 1.2;
  --sg-line-height-body: 1.6;
  --sg-line-height-relaxed: 1.75;

  /* Spacing */
  --sg-space-0: 0;
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 20px;
  --sg-space-6: 24px;
  --sg-space-7: 28px;
  --sg-space-8: 32px;
  --sg-space-9: 40px;
  --sg-space-10: 48px;

  /* Radius */
  --sg-radius-xs: 8px;
  --sg-radius-sm: 10px;
  --sg-radius-md: 14px;
  --sg-radius-lg: 18px;
  --sg-radius-xl: 24px;
  --sg-radius-pill: 999px;

  /* Shadow */
  --sg-shadow-sm: 0 4px 14px rgba(15,23,42,.06);
  --sg-shadow-md: 0 10px 32px rgba(15,23,42,.08);
  --sg-shadow-lg: 0 18px 48px rgba(15,23,42,.12);
  --sg-shadow-xl: 0 24px 80px rgba(15,23,42,.18);

  /* Border */
  --sg-border-width: 1px;
  --sg-border-width-strong: 1px;

  /* Motion */
  --sg-ease-standard: cubic-bezier(.2,.8,.2,1);
  --sg-ease-emphasized: cubic-bezier(.22,.72,.16,1);
  --sg-duration-fast: 120ms;
  --sg-duration-normal: 180ms;
  --sg-duration-slow: 280ms;

  /* Layering */
  --sg-z-base: 1;
  --sg-z-tablehead: 18;
  --sg-z-sticky: 20;
  --sg-z-topbar: 84;
  --sg-z-filter: 64;
  --sg-z-dropdown: 92;
  --sg-z-backdrop: 96;
  --sg-z-drawer: 100;
  --sg-z-modal: 110;
  --sg-z-toast: 140;

  /* Component sizing */
  --sg-input-h-sm: 36px;
  --sg-input-h: 42px;
  --sg-input-h-lg: 48px;
  --sg-toolbar-min-h: 52px;
  --sg-table-row-h: 48px;
  --sg-table-row-h-compact: 40px;
  --sg-table-row-h-relaxed: 56px;

  /* Shell sizing */
  --sg-shell-top-h: 72px;
  --sg-shell-side-w: 280px;
  --sg-shell-content-max: none;
  --sg-shell-section-gap: 18px;
  --sg-shell-page-pad-x: 18px;
  --sg-shell-page-pad-y: 18px;
  --sg-shell-radius: 18px;
  --sg-shell-top-gap: 14px;
  --sg-shell-card-gap: 12px;

  /* Default semantic surface map (light is the default runtime base) */
  --sg-bg: #f6f8fb;
  --sg-app-bg: var(--sg-bg);
  --sg-surface: #ffffff;
  --sg-surface-muted: #f8fafc;
  --sg-surface-elevated: #eef2f7;
  --sg-surface-2: var(--sg-surface-muted);
  --sg-surface-3: var(--sg-surface-elevated);
  --sg-surface-4: #e7edf5;
  --sg-text: #0f172a;
  --sg-text-soft: #1e293b;
  --sg-text-2: var(--sg-text-soft);
  --sg-muted: #64748b;
  --sg-disabled: #9ca3af;
  --sg-border: #d9e2ec;
  --sg-border-strong: #c6d1de;
  --sg-divider: #e2e8f0;
  --sg-primary: #2563eb;
  --sg-primary-hover: #1d4ed8;
  --sg-primary-active: #1e40af;
  --sg-primary-strong: var(--sg-primary-hover);
  --sg-primary-soft: rgba(37,99,235,.10);
  --sg-success: #16a34a;
  --sg-success-strong: #15803d;
  --sg-success-soft: rgba(22,163,74,.12);
  --sg-warning: #d97706;
  --sg-warning-strong: #b45309;
  --sg-warning-soft: rgba(217,119,6,.14);
  --sg-danger: #dc2626;
  --sg-danger-strong: #b91c1c;
  --sg-danger-soft: rgba(220,38,38,.12);
  --sg-info: #0891b2;
  --sg-info-strong: #0e7490;
  --sg-info-soft: rgba(8,145,178,.12);
  --sg-purple: #7c3aed;
  --sg-purple-strong: #6d28d9;
  --sg-purple-soft: rgba(124,58,237,.12);
  --sg-neutral: #475569;
  --sg-neutral-soft: rgba(71,85,105,.12);
  --sg-backdrop: rgba(15,23,42,.48);
  --sg-side-bg: #111827;
  --sg-side-text: #d1d5db;
  --sg-side-text-2: #9ca3af;
  --sg-side-hover: rgba(255,255,255,.06);
  --sg-side-active-bg: rgba(37,99,235,.15);
  --sg-side-active-rail: #2563eb;
  --sg-kpi-positive: var(--sg-success);
  --sg-kpi-negative: var(--sg-danger);
  --sg-shell-breadcrumb-fg: var(--sg-muted);
  --sg-shell-breadcrumb-current: var(--sg-text);
}


/* Phase 1 — semantic + shell token completion */
:root{
  --sg-light-app-bg:#F6F8FA;
  --sg-light-surface:#FFFFFF;
  --sg-light-surface-2:#FFFFFF;
  --sg-light-border:#E5E7EB;
  --sg-light-divider:#E2E8F0;
  --sg-light-text:#111827;
  --sg-light-text-2:#4B5563;
  --sg-light-muted:#6B7280;
  --sg-light-disabled:#9CA3AF;
  --sg-light-primary:#2563EB;
  --sg-light-primary-hover:#1D4ED8;
  --sg-light-primary-active:#1E40AF;
  --sg-light-primary-soft:#EFF6FF;
  --sg-light-text-on-solid:#FFFFFF;
  --sg-light-side-bg:#111827;
  --sg-light-side-text:#D1D5DB;
  --sg-light-side-text-2:#9CA3AF;
  --sg-light-side-hover:color-mix(in srgb, #FFFFFF 6%, transparent);
  --sg-light-side-active-bg:color-mix(in srgb, #2563EB 15%, transparent);
  --sg-light-side-active-rail:#2563EB;
  --sg-light-shadow-sm:0 2px 10px rgba(15,23,42,.06);
  --sg-light-shadow-md:0 14px 40px rgba(15,23,42,.10);

  --sg-dark-app-bg:#0F172A;
  --sg-dark-surface:#1E293B;
  --sg-dark-surface-2:#273449;
  --sg-dark-border:#334155;
  --sg-dark-divider:#374151;
  --sg-dark-text:#F1F5F9;
  --sg-dark-text-2:#CBD5E1;
  --sg-dark-muted:#94A3B8;
  --sg-dark-disabled:#64748B;
  --sg-dark-primary:#3B82F6;
  --sg-dark-primary-hover:#60A5FA;
  --sg-dark-primary-active:#2563EB;
  --sg-dark-primary-soft:color-mix(in srgb, #3B82F6 15%, transparent);
  --sg-dark-text-on-solid:#FFFFFF;
  --sg-dark-side-bg:#0B1220;
  --sg-dark-side-text:#CBD5E1;
  --sg-dark-side-text-2:#94A3B8;
  --sg-dark-side-hover:color-mix(in srgb, #FFFFFF 8%, transparent);
  --sg-dark-side-active-bg:color-mix(in srgb, #3B82F6 15%, transparent);
  --sg-dark-side-active-rail:#3B82F6;
  --sg-dark-shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --sg-dark-shadow-md:0 18px 60px rgba(0,0,0,.45);

  --sg-success-bg:color-mix(in srgb, var(--sg-success) 16%, transparent);
  --sg-success-border:color-mix(in srgb, var(--sg-success) 55%, transparent);
  --sg-success-text:#14532d;
  --sg-success-text-dark:#bbf7d0;

  --sg-warning-bg:color-mix(in srgb, #f59e0b 18%, transparent);
  --sg-warning-border:color-mix(in srgb, #f59e0b 62%, transparent);
  --sg-warning-text:#78350f;
  --sg-warning-text-dark:#fed7aa;

  --sg-danger-bg:color-mix(in srgb, var(--sg-danger) 16%, transparent);
  --sg-danger-border:color-mix(in srgb, var(--sg-danger) 60%, transparent);
  --sg-danger-text:#7f1d1d;
  --sg-danger-text-dark:#fecaca;

  --sg-info-bg:color-mix(in srgb, #3b82f6 16%, transparent);
  --sg-info-border:color-mix(in srgb, #3b82f6 55%, transparent);
  --sg-info-text:#1e3a8a;
  --sg-info-text-dark:#bfdbfe;

  --sg-neutral-bg:color-mix(in srgb, #64748b 14%, transparent);
  --sg-neutral-border:color-mix(in srgb, #64748b 35%, transparent);
  --sg-neutral-text:#1e293b;
  --sg-neutral-text-dark:#e2e8f0;

  --sg-purple-bg:color-mix(in srgb, #a855f7 16%, transparent);
  --sg-purple-border:color-mix(in srgb, #a855f7 55%, transparent);
  --sg-purple-text:#581c87;
  --sg-purple-text-dark:#e9d5ff;

  --sg-muted-bg:color-mix(in srgb, #94a3b8 12%, transparent);
  --sg-muted-border:color-mix(in srgb, #94a3b8 22%, transparent);
  --sg-muted-text:var(--sg-muted);
  --sg-muted-surface:color-mix(in srgb, #94a3b8 6%, transparent);

  --sg-overlay:rgba(15,23,42,.46);
  --sg-transparent: transparent;
  --sg-scrollbar-track-border: transparent;
  --sg-toast-shadow: 0 10px 28px color-mix(in srgb, var(--sg-text) 18%, transparent);
  --sg-primary-soft-strong: color-mix(in srgb, var(--sg-primary) 14%, transparent);
  --sg-warning-text-strong: var(--sg-warning-strong);
  --sg-side-text-soft: color-mix(in srgb, var(--sg-side-text) 75%, transparent);
  --sg-info-ring: color-mix(in srgb, var(--sg-info) 25%, transparent);
  --sg-info-border-strong: color-mix(in srgb, var(--sg-info) 55%, transparent);
  --sg-side-surface-soft: color-mix(in srgb, var(--sg-side-text) 6%, transparent);
  --sg-side-border-soft: color-mix(in srgb, var(--sg-side-text) 10%, transparent);
  --sg-backdrop:rgba(15,23,42,.48);
  --sg-shell-bg:var(--sg-surface);
  --sg-shell-border:var(--sg-border);
  --sg-shell-muted-surface:color-mix(in srgb, var(--sg-surface) 92%, var(--sg-text) 8%);
  --sg-shell-tooltip-bg:rgba(2,6,23,.92);
  --sg-scrollbar-thumb:color-mix(in srgb, #94a3b8 30%, transparent);
  --sg-scrollbar-thumb-hover:color-mix(in srgb, #94a3b8 45%, transparent);
  --sg-sidebar-border:color-mix(in srgb, #FFFFFF 10%, transparent);
  --sg-sidebar-surface:color-mix(in srgb, #FFFFFF 3%, transparent);
  --sg-sidebar-surface-hover:color-mix(in srgb, #FFFFFF 7%, transparent);
  --sg-sidebar-chip-border:color-mix(in srgb, #FFFFFF 14%, transparent);
  --sg-sidebar-button-border:color-mix(in srgb, #FFFFFF 12%, transparent);
  --sg-sidebar-glow:linear-gradient(135deg, color-mix(in srgb, var(--sg-primary) 95%, transparent), color-mix(in srgb, var(--sg-purple) 55%, transparent));
  --sg-grid-line:color-mix(in srgb, #94a3b8 28%, transparent);
  --sg-scrim:color-mix(in srgb, #000000 30%, transparent);
  --sg-table-row-alt:color-mix(in srgb, #000000 2%, transparent);
  --sg-plain-transparent:transparent;

  /* Phase 1 — activation semantic layer */
  --sg-panel:var(--sg-surface);
  --sg-panel-border:color-mix(in srgb, var(--sg-muted) 22%, transparent);
  --sg-panel-border-strong:color-mix(in srgb, var(--sg-muted) 28%, transparent);
  --sg-panel-shadow:0 12px 32px color-mix(in srgb, var(--sg-text) 8%, transparent);
  --sg-panel-shadow-lg:0 18px 42px color-mix(in srgb, var(--sg-text) 12%, transparent);
  --sg-soft-surface:color-mix(in srgb, var(--sg-muted) 6%, var(--sg-surface));
  --sg-soft-surface-2:color-mix(in srgb, var(--sg-muted) 8%, var(--sg-surface));
  --sg-soft-surface-3:color-mix(in srgb, var(--sg-muted) 4%, var(--sg-surface));
  --sg-field-surface:color-mix(in srgb, var(--sg-muted) 8%, var(--sg-surface));
  --sg-field-border:color-mix(in srgb, var(--sg-muted) 24%, transparent);
  --sg-menu-surface:color-mix(in srgb, var(--sg-surface) 92%, var(--sg-text) 8%);
  --sg-menu-border:color-mix(in srgb, var(--sg-muted) 24%, transparent);
  --sg-menu-shadow:0 20px 40px color-mix(in srgb, var(--sg-text) 22%, transparent);
  --sg-selection-soft:color-mix(in srgb, var(--sg-primary) 14%, transparent);
  --sg-selection-strong:color-mix(in srgb, var(--sg-primary) 18%, transparent);
  --sg-selection-border:color-mix(in srgb, var(--sg-primary) 34%, transparent);
  --sg-selection-border-strong:color-mix(in srgb, var(--sg-primary) 55%, transparent);
  --sg-accent-text:var(--sg-primary-hover);
  --sg-status-neutral-bg:var(--sg-neutral-bg);
  --sg-status-neutral-text:var(--sg-neutral-text);
  --sg-status-ok-bg:var(--sg-success-bg);
  --sg-status-ok-text:var(--sg-success);
  --sg-status-warn-bg:var(--sg-warning-bg);
  --sg-status-warn-text:var(--sg-warning);
  --sg-status-err-bg:var(--sg-danger-bg);
  --sg-status-err-text:var(--sg-danger);
  --sg-status-info-bg:var(--sg-info-bg);
  --sg-status-info-text:var(--sg-primary);
  --sg-backdrop-soft:color-mix(in srgb, var(--sg-text) 34%, transparent);
  --sg-backdrop-strong:color-mix(in srgb, var(--sg-text) 95%, transparent);
  --sg-backdrop-strong-2:color-mix(in srgb, var(--sg-text) 92%, transparent);
  --sg-solid-surface:color-mix(in srgb, var(--sg-text) 92%, var(--sg-surface));
  --sg-solid-surface-2:color-mix(in srgb, var(--sg-text) 98%, var(--sg-surface));
  --sg-solid-text:var(--sg-text-on-solid);
  --sg-camera-surface:color-mix(in srgb, var(--sg-text) 98%, transparent);
  --sg-camera-frame:color-mix(in srgb, var(--sg-primary) 90%, transparent);
  --sg-camera-mask:color-mix(in srgb, var(--sg-text) 28%, transparent);
  --sg-pagebtn-surface:var(--sg-field-surface);
  --sg-pagebtn-active-bg:var(--sg-selection-soft);
  --sg-pagebtn-active-border:var(--sg-selection-border);
  --sg-pagebtn-active-text:var(--sg-primary);
  --sg-toast-surface:var(--sg-solid-surface);
  --sg-toast-ok-surface:var(--sg-success-text);
  --sg-toast-err-surface:var(--sg-danger-text);
  --sg-toast-warn-surface:var(--sg-warning-text);
}

html.theme-light{
  --sg-app-bg:var(--sg-light-app-bg);
  --sg-surface:var(--sg-light-surface);
  --sg-surface-2:var(--sg-light-surface-2);
  --sg-border:var(--sg-light-border);
  --sg-divider:var(--sg-light-divider);
  --sg-text:var(--sg-light-text);
  --sg-text-2:var(--sg-light-text-2);
  --sg-muted:var(--sg-light-muted);
  --sg-disabled:var(--sg-light-disabled);
  --sg-primary:var(--sg-light-primary);
  --sg-primary-hover:var(--sg-light-primary-hover);
  --sg-primary-active:var(--sg-light-primary-active);
  --sg-primary-soft:var(--sg-light-primary-soft);
  --sg-text-on-solid:var(--sg-light-text-on-solid);
  --sg-text-on-primary:var(--sg-light-text-on-solid);
  --sg-text-on-danger:var(--sg-light-text-on-solid);
  --sg-side-bg:var(--sg-light-side-bg);
  --sg-side-text:var(--sg-light-side-text);
  --sg-side-text-2:var(--sg-light-side-text-2);
  --sg-side-hover:var(--sg-light-side-hover);
  --sg-side-active-bg:var(--sg-light-side-active-bg);
  --sg-side-active-rail:var(--sg-light-side-active-rail);
  --sg-shadow-sm:var(--sg-light-shadow-sm);
  --sg-shadow-md:var(--sg-light-shadow-md);
}

html.theme-dark{
  --sg-app-bg:var(--sg-dark-app-bg);
  --sg-surface:var(--sg-dark-surface);
  --sg-surface-2:var(--sg-dark-surface-2);
  --sg-border:var(--sg-dark-border);
  --sg-divider:var(--sg-dark-divider);
  --sg-text:var(--sg-dark-text);
  --sg-text-2:var(--sg-dark-text-2);
  --sg-muted:var(--sg-dark-muted);
  --sg-disabled:var(--sg-dark-disabled);
  --sg-primary:var(--sg-dark-primary);
  --sg-primary-hover:var(--sg-dark-primary-hover);
  --sg-primary-active:var(--sg-dark-primary-active);
  --sg-primary-soft:var(--sg-dark-primary-soft);
  --sg-text-on-solid:var(--sg-dark-text-on-solid);
  --sg-text-on-primary:#07111F;
  --sg-text-on-danger:#07111F;
  --sg-side-bg:var(--sg-dark-side-bg);
  --sg-side-text:var(--sg-dark-side-text);
  --sg-side-text-2:var(--sg-dark-side-text-2);
  --sg-side-hover:var(--sg-dark-side-hover);
  --sg-side-active-bg:var(--sg-dark-side-active-bg);
  --sg-side-active-rail:var(--sg-dark-side-active-rail);
  --sg-shadow-sm:var(--sg-dark-shadow-sm);
  --sg-shadow-md:var(--sg-dark-shadow-md);
}


/* Phase 1B — reports + gifts semantic runtime tokens */
:root{
  --sg-panel: var(--sg-surface);
  --sg-panel-2: var(--sg-surface-2);
  --sg-card: var(--sg-surface);
  --sg-card-soft: var(--sg-muted-surface);
  --sg-line: var(--sg-border);
  --sg-line-strong: var(--sg-border-strong);
  --sg-btn-bg: var(--sg-surface-2);
  --sg-btn-hover: var(--sg-muted-surface);
  --sg-btn-text: var(--sg-text);
  --sg-accent-grad: linear-gradient(135deg, var(--sg-primary), var(--sg-info));
  --sg-accent-soft-grad: linear-gradient(135deg, var(--sg-primary-soft), var(--sg-purple-soft));
  --sg-overlay-strong: var(--sg-backdrop);
  --sg-menu-bg: var(--sg-surface);
  --sg-menu-shadow: var(--sg-shadow-lg);
  --sg-focus-ring: 0 0 0 1px var(--sg-primary-soft) inset;
  --sg-thumb-bg: var(--sg-accent-soft-grad);
  --sg-stat-bg: var(--sg-muted-surface);
  --sg-tab-active-bg: var(--sg-primary-soft);
  --sg-tab-active-text: var(--sg-primary);
  --sg-badge-ok-bg: var(--sg-success-soft);
  --sg-badge-ok-text: var(--sg-success);
  --sg-badge-warn-bg: var(--sg-warning-soft);
  --sg-badge-warn-text: var(--sg-warning);
  --sg-badge-danger-bg: var(--sg-danger-soft);
  --sg-badge-danger-text: var(--sg-danger);
  --sg-badge-info-bg: var(--sg-info-soft);
  --sg-badge-info-text: var(--sg-info);
}