/* =============================================================================
   UI 2026 Design Tokens

   CUBE CSS Structure:
   - Tokens defined at :root for GLOBAL availability
   - Any block/utility can access these without needing .ui-2026 ancestor
   - .ui-2026 class is for BASE STYLING application, not variable scoping
   ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     Core Colors (HSL values for flexible opacity)
     ------------------------------------------------------------------------- */
  --background: 210 20% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 262 83% 58%; /* Default purple - module scopes override as needed */
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 32% 85%;
  --input: 214 32% 91%;
  --ring: 262 83% 58%;
  
  /* Surface Colors (Aliases for clarity in blocks) */
  --color-surface: hsl(var(--card));
  --color-surface-raised: hsl(var(--background));
  --color-surface-hover: hsl(var(--secondary));
  --color-surface-muted: hsl(var(--muted));

  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --input-h: 38px;
  --input-h-sm: 30px;

  /* -------------------------------------------------------------------------
     Status Colors (HSL values)
     ------------------------------------------------------------------------- */
  --status-success: 142 71% 45%;
  --status-warning: 38 92% 50%;
  --status-error: 0 84% 60%;
  --status-info: 221 83% 53%;
  --status-message: 210 12% 45%;
  --status-pending: 271 81% 56%;
  --status-success-bg: 142 71% 45% / 0.1;
  --status-warning-bg: 38 92% 50% / 0.1;
  --status-error-bg: 0 84% 60% / 0.1;
  --status-info-bg: 221 83% 53% / 0.1;
  --status-message-bg: 210 12% 45% / 0.1;
  --status-pending-bg: 271 81% 56% / 0.1;

  /* Accessible same-hue TEXT/icon-glyph tokens (WCAG 2 AA, >=4.5:1).
     Use these for status TEXT and status icon-glyph `color:` ONLY — never for
     background / border / accent-bar (those keep the bright --status-* values).
     These are verified against the actual badge backgrounds — the bright
     --status-* colour at 15-20% alpha over the page bg, NOT pure white — since
     that tinted surface is what they actually sit on. info/success/pending were
     darkened 1-2 lightness points (info L33->L31, success L28->L27,
     pending L28->L27) because at the previous values they landed at 4.28/4.53/
     4.54 on the tint (below AA). All six now clear 4.5:1 on their badge tint.
     (a11y pass 2026-06) */
  --status-success-text: hsl(142 72% 27%);
  --status-warning-text: hsl(38 95% 28%);
  --status-error-text: hsl(0 72% 42%);
  --status-info-text: hsl(199 89% 31%);
  --status-message-text: hsl(217 70% 40%);
  --status-pending-text: hsl(38 95% 27%);

  /* -------------------------------------------------------------------------
     Accessible status TEXT colours (WCAG 2 AA)
     @ai: The bright --status-* hues above are tuned for FILLS/badges/borders and
     fail 4.5:1 as text on white or on their own 10-20% tint (warning 2.13:1,
     success 2.30:1, error 3.78:1). Use these darker, same-hue variants whenever a
     status colour is applied as `color:` (text/icon-glyph), keeping the bright
     tokens for `background`/`border`. Ratios are vs white / vs the matching tint.
     ------------------------------------------------------------------------- */
  --status-success-text: 142 72% 28%; /* 5.35:1 white, 4.70:1 on tint */
  --status-warning-text: 38 95% 28%;  /* 5.95:1 white, 5.12:1 on tint */
  --status-error-text: 0 72% 42%;     /* 6.48:1 white, 5.33:1 on tint */
  --status-info-text: 221 83% 40%;    /* 7.95:1 white */
  --status-message-text: 210 12% 38%; /* 6.33:1 white */
  --status-pending-text: 271 60% 42%; /* 8.13:1 white */

  /* -------------------------------------------------------------------------
     Chart Colors (HSL values)
     ------------------------------------------------------------------------- */
  --chart-1: 142 71% 45%;
  --chart-2: 199 89% 48%;
  --chart-3: 271 81% 56%;
  --chart-4: 38 92% 50%;
  --chart-5: 340 82% 52%;

  /* -------------------------------------------------------------------------
     Module Accent Colors (hex for direct use)
     Used by: home page cards, navigation highlights, module badges
     ------------------------------------------------------------------------- */
  --module-customer-service: #d9ebb8; /* Lighter, more vibrant green tint for subnav */
  --module-customer-service-dark: #3a5a1f; /* Darker green for text */
  --module-customer-service-accent: #6FB33F; /* SBOS logo green */
  --module-sales: #f5c563;
  --module-sales-dark: #5c4510;
  --module-sales-accent: #f59e0b;
  --module-purchasing: #9b8bb8;
  --module-purchasing-dark: #4a3d5c;
  --module-purchasing-accent: #8b5cf6;
  --module-manufacturing: #1e293b;
  --module-manufacturing-dark: #020617;
  --module-manufacturing-accent: #475569;
  --module-installation: #7eb8da;
  --module-installation-dark: #1e4a63;
  --module-installation-accent: #0ea5e9;
  --module-dispatch: #6b8cae;
  --module-dispatch-dark: #2d3d4f;
  --module-dispatch-accent: #3b82f6;
  --module-accounting: #a89078;
  --module-accounting-dark: #4a3d32;
  --module-accounting-accent: #94a3b8; /* slate-400 - light grey, professional and distinctive */
  --module-reports: #e57373;
  --module-reports-dark: #5c2828;
  --module-reports-accent: #f43f5e;
  --module-settings: #ffd54f;
  --module-settings-dark: #5c4a10;
  --module-settings-accent: #eab308;

  /* Module accent with HSL for opacity support */
  --module-accent: hsl(var(--primary));
  --module-accent-hover: hsl(var(--primary) / 0.9);

  /* -------------------------------------------------------------------------
     Table Header Module Colors (Table Screens Guide)
     Softer palette for data table headers
     ------------------------------------------------------------------------- */
  --module-header-customer-service: #cedd98;
  --module-header-sales: var(--module-sales);
  --module-header-manufacturing: var(--module-manufacturing);
  --module-header-purchasing: var(--module-purchasing);
  --module-header-installation: var(--module-installation);
  --module-header-dispatch: var(--module-dispatch);
  --module-header-accounting: var(--module-accounting);
  --module-header-reports: var(--module-reports);
  --module-header-settings: var(--module-settings);

  /* -------------------------------------------------------------------------
     Table Zebra Tints (V0 table rows)
     ------------------------------------------------------------------------- */
  --table-zebra-customer-service: #f2f4dd;
  --table-zebra-sales: #fdf1d2;

  /* -------------------------------------------------------------------------
     Typography Scale
     ------------------------------------------------------------------------- */
  --font-geist-sans: 'Geist Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;
  --font-geist-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
    monospace;
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* -------------------------------------------------------------------------
     CUBE Spacing Scale (fluid)
     ------------------------------------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.11vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.22vw, 0.875rem);
  --space-s: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.43rem + 0.33vw, 1.6875rem);
  --space-l: clamp(2rem, 1.91rem + 0.43vw, 2.25rem);
  --space-xl: clamp(3rem, 2.87rem + 0.65vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.83rem + 0.87vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.74rem + 1.3vw, 6.75rem);
  --gutter: var(--space-m);
  --measure: 65ch;

  /* -------------------------------------------------------------------------
     Numeric Spacing Scale (legacy usage in SBOS)
     ------------------------------------------------------------------------- */
  --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;

  /* -------------------------------------------------------------------------
     UI-2026 Legacy Spacing (mapped to numeric scale)
     ------------------------------------------------------------------------- */
  --ui-2026-space-1: var(--space-1);
  --ui-2026-space-2: var(--space-2);
  --ui-2026-space-3: var(--space-3);
  --ui-2026-space-4: var(--space-4);
  --ui-2026-space-5: var(--space-5);
  --ui-2026-space-6: var(--space-6);
  --ui-2026-space-8: var(--space-8);
  --ui-2026-space-10: var(--space-10);
  --ui-2026-space-12: var(--space-12);
  --ui-2026-space-16: var(--space-16);

  /* -------------------------------------------------------------------------
     Sidebar Tokens (if/when used)
     ------------------------------------------------------------------------- */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 262 83% 58%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 262 83% 58%;
}