/* ============================================================================
   M Line Books — Design Tokens
   Professional business UI. Neutral surfaces + one accent per active company.
   Company accent colors are applied dynamically via --company-color / -soft.
   ============================================================================ */

:root,
[data-theme="light"] {
  /* Surfaces */
  --color-bg: #f6f7f8;
  --color-surface: #ffffff;
  --color-surface-2: #fbfbfc;
  --color-surface-raised: #ffffff;
  --color-border: #dde1e6;
  --color-divider: #e6e9ed;

  /* Text */
  --color-text: #1a2027;
  --color-text-muted: #5b6470;
  --color-text-faint: #8b93a0;
  --color-text-inverse: #ffffff;

  /* Neutral accent (used when no company selected / chrome) */
  --color-primary: #22577a;
  --color-primary-hover: #1a4761;
  --color-primary-soft: #e5eef4;

  /* Semantic */
  --color-success: #2f7d52;
  --color-success-soft: #e3f3e9;
  --color-warning: #a9660f;
  --color-warning-soft: #fbeed9;
  --color-danger: #b3261e;
  --color-danger-soft: #fbe4e2;
  --color-info: #2b6cb0;
  --color-info-soft: #e3edf7;

  /* Low-confidence field highlight */
  --color-low-confidence: #a9660f;
  --color-low-confidence-bg: #fff3e0;
  --color-low-confidence-border: #e0a340;

  --shadow-sm: 0 1px 2px rgba(20, 24, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 24, 30, 0.10);
  --shadow-lg: 0 10px 30px rgba(20, 24, 30, 0.16);
}

[data-theme="dark"] {
  --color-bg: #12151a;
  --color-surface: #1a1e24;
  --color-surface-2: #1f2430;
  --color-surface-raised: #232833;
  --color-border: #2d333e;
  --color-divider: #262c36;

  --color-text: #e9edf2;
  --color-text-muted: #a3acb8;
  --color-text-faint: #6d7684;
  --color-text-inverse: #12151a;

  --color-primary: #6fa8cf;
  --color-primary-hover: #8bbadd;
  --color-primary-soft: #1e3040;

  --color-success: #5fbf87;
  --color-success-soft: #16311f;
  --color-warning: #e0a340;
  --color-warning-soft: #3a2c12;
  --color-danger: #e2716a;
  --color-danger-soft: #3a1c1a;
  --color-info: #6fa3d8;
  --color-info-soft: #1b2c3d;

  --color-low-confidence: #e0a340;
  --color-low-confidence-bg: #3a2c12;
  --color-low-confidence-border: #e0a340;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

:root {
  /* Type scale (fluid, 12px floor) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 4px spacing system */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --nav-height-mobile: 62px;
  --header-height: 56px;
  --sidebar-width: 236px;

  /* Default company accent fallback (overridden per active company) */
  --company-color: var(--color-primary);
  --company-color-soft: var(--color-primary-soft);
}