/* ============================================================
   THEME TOKENS — Structural Design System
   ============================================================
   These tokens are SHARED across all QVision products.
   They define the structural language: spacing, radii, shadows,
   typography, transitions, z-indices.

   Do NOT change these per-product — only override colors via
   brand-tokens.css.
   ============================================================ */

:root {
  /* ===== TYPOGRAPHY ===== */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code",
               Consolas, "Liberation Mono", monospace;
  --font-display: "Inter", "Segoe UI", sans-serif;

  /* Font sizes — modular scale */
  --fs-xs:   0.6875rem;  /* 11px - micro labels */
  --fs-sm:   0.75rem;    /* 12px - small text, table cells */
  --fs-base: 0.8125rem;  /* 13px - body / nav */
  --fs-md:   0.875rem;   /* 14px - card titles */
  --fs-lg:   1rem;       /* 16px - section headers */
  --fs-xl:   1.125rem;   /* 18px - page titles */
  --fs-2xl:  1.375rem;   /* 22px - metric values */
  --fs-3xl:  1.75rem;    /* 28px - page hero */

  /* Font weights — only use 400 and 500 for UI */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:  -0.3px;
  --ls-snug:   -0.2px;
  --ls-normal: 0;
  --ls-wide:   0.4px;
  --ls-wider:  0.8px;

  /* ===== SPACING ===== */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ===== RADII ===== */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* ===== Z-INDEX ===== */
  --z-base:     1;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal:    1040;
  --z-popover:  1060;
  --z-tooltip:  1070;
  --z-toast:    1080;

  /* ===== LAYOUT ===== */
  --sidebar-width:        220px;
  --sidebar-collapsed-w:  64px;
  --topbar-height:        52px;
  --content-max-width:    1440px;

  /* ===== SEMANTIC COLOR SEEDS =====
     These are intentionally NOT overridden by brand color.
     Status semantics (paid/shipped/error) must stay visually distinct
     from brand. Keep these constant across all products. */
  --semantic-success-50:  #EAF7E6;
  --semantic-success-500: #3B6D11;
  --semantic-success-700: #2A4F0C;

  --semantic-info-50:  #E6F1FB;
  --semantic-info-500: #185FA5;
  --semantic-info-700: #134A82;

  --semantic-warning-50:  #FEF3E2;
  --semantic-warning-500: #f5930d;   /* vivid amber */
  --semantic-warning-700: #C47409;

  --semantic-danger-50:  #FBE5E1;
  --semantic-danger-500: #993C1D;
  --semantic-danger-700: #7A2F17;
}