/* Design Tokens - Light Theme
   Centralized source of truth for all design values
   WCAG 2.1 AA Compliant color palette

   Contrast Audit: 2026-01-27
   - All text colors verified ≥4.5:1 on white backgrounds
   - Large text (≥18pt bold or ≥24pt) verified ≥3:1
   - Interactive elements verified ≥4.5:1
   - See docs/accessibility/contrast-audit-2026-01.md for full audit

   Version: 1.1.0
*/

:root {
  /* ===== COLOR PALETTE - LIGHT THEME ===== */

  /* Primary Blues (main interaction color) */
  --color-primary: #2077b2; /* Default blue - links, focus states, primary actions (4.84:1) */
  --color-primary-dark: #1a6a9e; /* Darker blue for hover states (5.83:1) */
  --color-primary-light: rgba(32, 119, 178, 0.1); /* Light tint for backgrounds */
  --color-primary-decorative: #3498db; /* Original blue - decorative use only, not for text */

  /* Accent Colors */
  --color-accent-success: #1e8449; /* Green for success states (4.72:1) */
  --color-accent-success-dark: #196f3d; /* Darker green for hover (6.02:1) */
  --color-accent-success-light: rgba(30, 132, 73, 0.1); /* Light green background */
  --color-accent-success-decorative: #27ae60; /* Original green - decorative use only */

  --color-accent-danger: #c0392b; /* Red for destructive actions (5.44:1) */
  --color-accent-danger-dark: #a93226; /* Darker red for hover (6.56:1) */
  --color-accent-danger-light: rgba(192, 57, 43, 0.3); /* Light red for shadows */

  --color-accent-error: #d63031; /* Error red for form validation (4.85:1) */
  --color-accent-error-dark: #b71c1c; /* Darker error red (6.28:1) */
  --color-accent-error-light: #ffebee; /* Light error background */
  --color-accent-error-decorative: #e74c3c; /* Original red - decorative use only */

  --color-accent-warning: #8a6d00; /* Orange/amber for warning text (4.92:1) */
  --color-accent-warning-bg: #f39c12; /* Original orange - for backgrounds with dark text */
  --color-accent-warning-light: rgba(243, 156, 18, 0.1); /* Light warning background */

  /* Neutral Colors - Grayscale */
  --color-neutral-white: #ffffff; /* Pure white - backgrounds, cards */
  --color-neutral-off-white: #f9f9f9; /* Off-white for subtle backgrounds */
  --color-neutral-light-gray: #f5f5f5; /* Light gray for disabled states */
  --color-neutral-light-gray-2: #ecf0f1; /* Lighter gray for hover states */
  --color-neutral-light-gray-3: #e8e8e8; /* Lightest gray for skeletons */
  --color-neutral-light-gray-4: #e0e0e0; /* Very light gray for borders */
  --color-neutral-light-gray-5: #f0f0f0; /* Shimmer animation color */

  --color-neutral-medium-gray: #687a7c; /* Medium gray for secondary actions (4.50:1) */
  --color-neutral-medium-gray-dark: #636e72; /* Darker medium gray for text (5.24:1) */
  --color-neutral-medium-gray-decorative: #95a5a6; /* Original gray - borders, decorative only */

  --color-neutral-dark-gray: #555555; /* Dark gray for body text */
  --color-neutral-dark-gray-2: #34495e; /* Darker gray for code blocks */
  --color-neutral-darkest-gray: #2c3e50; /* Darkest gray for headings */

  --color-neutral-light-blue-gray: #bdc3c7; /* Light blue-gray for placeholders, icons */
  /* #1264 tentative nav-chrome colors (CXO ratify/revise) — LIGHT-surface current top nav */
  --color-text-nav: #5a6c7d; /* muted nav-link / dropdown text */
  --color-icon-muted: #7f8c8d; /* muted nav icons / chevrons */
  --color-state-active-bg: #e3f2fd; /* active nav-item background tint */

  /* #1280 nav DARK surface — bounded dark zone for the left-rail nav (NOT app-wide dark
     mode / no theme system). CXO spec 2026-06-18 (dev/active/design-spec-dark-nav-shell-2026-06-18.md).
     Nav-scoped CSS references these only — no raw hex in nav CSS after the left-rail lands. */
  --color-nav-bg: #11212e; /* left nav background */
  --color-nav-text: #cbd5dc; /* primary nav text (conversation names) */
  --color-nav-text-muted: #7f97a6; /* section labels ("Chats · Layer 1") */
  --color-nav-text-secondary: #9fb3c2; /* secondary items (timestamps, metadata) */
  --color-nav-divider: #5d7385; /* footer dividers, subtle separators */
  --color-nav-item-hover: rgba(255, 255, 255, 0.07); /* item hover bg */
  --color-nav-item-active: rgba(255, 255, 255, 0.13); /* active/selected item bg */

  /* Special Colors */
  --color-special-blue-dark: #007acc; /* Darker blue for help tooltips, code */
  --color-special-blue-hover: #005a9e; /* Hover state for special blue */

  --color-special-dark-bg: #2c3e50; /* Dark background for tooltips */
  --color-special-dark-text: #e0e0e0; /* Light text for dark backgrounds */

  /* Semantic Colors (Aliases for better readability) */
  --color-text-primary: #2c3e50; /* Primary text color (10.98:1) */
  --color-text-secondary: #636e72; /* Secondary text, muted text (5.24:1) */
  --color-text-tertiary: #555555; /* Tertiary text (7.46:1) */
  --color-text-muted: #636e72; /* Muted text, same as secondary (5.24:1) */
  --color-text-disabled: #757575; /* Disabled text - WCAG exempt but still 4.61:1 */
  --color-text-light: #767676; /* Light text, placeholders with labels (4.54:1) */
  --color-text-placeholder: #bdc3c7; /* Placeholder ONLY with visible labels - WCAG exempt */

  --color-background-primary: #ffffff; /* Primary background */
  --color-background-secondary: #f5f5f5; /* Secondary background */
  --color-background-tertiary: #ecf0f1; /* Tertiary background (hover states) */

  --color-border-light: #ecf0f1; /* Light borders */
  --color-border-medium: #95a5a6; /* Medium borders - decorative, no text contrast needed */

  /* Disabled state background */
  --color-disabled: #bdc3c7; /* Disabled background - use with dark text */

  --color-overlay-dark: rgba(0, 0, 0, 0.7); /* Dark overlay for modals */
  --color-overlay-light: rgba(0, 0, 0, 0.5); /* Lighter overlay */
  --color-overlay-subtle: rgba(0, 0, 0, 0.15); /* Subtle overlay for shadows */

  /* ===== SPACING ===== */
  /* Already defined in spacing.css, repeated here for completeness */
  --space-xs: 4px; /* 0.5x - micro spacing */
  --space-dense: 6px; /* #1286 D2: dense-surface micro-spacing (Radar items, chips). Semantic name (CXO 2026-06-21) — describes the use, not an ordinal scale slot. Value sits between xs(4) and sm(8). */
  --space-sm: 8px; /* 1x - small spacing */
  --space-smd: 12px; /* #1264 tentative (CXO ratify/revise): nav 12px rhythm — between sm(8) + md(16) */
  --space-md: 16px; /* 2x - medium spacing */
  --space-lg: 24px; /* 3x - large spacing */
  --space-xl: 32px; /* 4x - extra large spacing */
  --space-2xl: 40px; /* 5x - 2x extra large */
  --space-3xl: 48px; /* 6x - 3x extra large */
  --space-4xl: 56px; /* 7x - 4x extra large */
  --space-5xl: 64px; /* 8x - 5x extra large */

  /* ===== GRID + BREAKPOINTS (#1286 D2) ===== */
  --grid-rail-width: 180px; /* left nav-rail column */
  --grid-radar-width: 320px; /* Radar panel column (home only) */
  /* Breakpoints — source-of-truth for media-query values (not applied as properties) */
  --breakpoint-mobile: 480px; /* single-column floor */
  --breakpoint-tablet: 768px; /* two-column: rail + content */
  --breakpoint-desktop: 1024px; /* full shell: rail + content (+ Radar on home) */

  /* ===== TYPOGRAPHY ===== */

  /* Font Family */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                  sans-serif;

  /* Font Sizes — rem-based (#1254 a11y): values are 1:1 with the prior px scale at the
     16px root default (0 visual change), but now scale with the user's browser/OS font
     preference, which px ignored. rem = relative to <html> (no html font-size override
     exists → root = 16px). px-in-comment = the equivalent at default root size. */
  --font-size-xs: 0.75rem; /* 12px — small captions, labels */
  --font-size-sm: 0.8125rem; /* 13px — small text, help text */
  --font-size-base: 0.875rem; /* 14px — body text, default */
  --font-size-md: 0.9375rem; /* 15px — slightly larger body text */
  --font-size-lg: 1rem; /* 16px — large body text, form fields */
  --font-size-xl: 1.125rem; /* 18px — large, prominent text */
  --font-size-2xl: 1.25rem; /* 20px — section titles */
  --font-size-3xl: 1.5rem; /* 24px — page titles */
  --font-size-4xl: 2rem; /* 32px — large headlines */
  --font-size-5xl: 3rem; /* 48px — hero text, main headlines */
  --font-size-6xl: 4.5rem; /* 72px — extra large (error page icons) */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.3;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* Baseline rhythm (#1286 D2): 8px grid base; 24px body baseline (3 × 8px, 14px text) */
  --baseline-unit: 8px;
  --baseline-rhythm: 24px;

  /* ===== BORDERS & SHADOWS ===== */

  /* Border Radius */
  --border-radius-sm: 4px; /* Small rounded corners */
  --border-radius-md: 6px; /* Medium rounded corners */
  --border-radius-lg: 8px; /* Large rounded corners */
  --border-radius-xl: 12px; /* Extra large rounded corners */
  --border-radius-full: 50%; /* Circular borders */
  --border-radius-pill: 999px; /* #1286 D2: pill shape for entity-type chips/tags (rectangular, not circular) */

  /* Box Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1); /* Small shadow */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); /* Medium shadow */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Large shadow */
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15); /* Extra large shadow (cards) */
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.5); /* Modal shadow */

  /* Shadow with primary color tint */
  --shadow-primary: 0 4px 12px rgba(32, 119, 178, 0.3); /* Primary color shadow */
  --shadow-primary-lg: 0 6px 16px rgba(32, 119, 178, 0.3); /* Large primary shadow */

  /* Shadow with danger color tint */
  --shadow-danger: 0 4px 12px rgba(192, 57, 43, 0.3); /* Danger color shadow */
  --shadow-danger-lg: 0 6px 16px rgba(192, 57, 43, 0.3); /* Large danger shadow */

  /* Shadow with success color tint */
  --shadow-success-lg: 0 6px 16px rgba(30, 132, 73, 0.3); /* Success color shadow */

  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-normal: 2px;
  --border-width-thick: 3px;
  --border-width-thick-lg: 4px;

  /* ===== TRANSITIONS & ANIMATIONS ===== */

  /* Transition Timing */
  --transition-duration-fast: 0.2s;
  --transition-duration-normal: 0.3s;
  --transition-duration-slow: 0.4s;

  --transition-timing-ease: ease;
  --transition-timing-ease-in-out: ease-in-out;

  /* Standard transitions */
  --transition-all: all var(--transition-duration-fast) var(--transition-timing-ease);
  --transition-color: color var(--transition-duration-fast) var(--transition-timing-ease);
  --transition-background: background var(--transition-duration-fast) var(--transition-timing-ease);
  --transition-transform: transform var(--transition-duration-fast) var(--transition-timing-ease);

  /* ===== LAYERING (Z-INDEX) ===== */

  --z-index-dropdown: 100;
  --z-index-sticky: 500;
  --z-index-navbar: 1000;
  --z-index-spinner: 2000;
  --z-index-modal: 2999;
  --z-index-toast: 3000; /* Above modal for notification visibility */

  /* ===== FOCUS STATES ===== */

  --focus-outline-width: 2px;
  --focus-outline-color: #2077b2;
  --focus-outline-offset: 2px;
  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);

  /* ===== ACCESSIBILITY ===== */

  /* Touch target minimum (48px for mobile) */
  --touch-target-min: 48px;

  /* High contrast mode support */
  @media (prefers-contrast: more) {
    --color-text-secondary: #4a4a4a; /* Enhanced contrast: 7.67:1 */
    --color-text-light: #595959; /* Enhanced contrast: 6.63:1 */
    --color-text-disabled: #595959; /* Enhanced contrast: 6.63:1 */
  }

  /* Reduced motion - disable animations */
  @media (prefers-reduced-motion: reduce) {
    --transition-duration-fast: 0s;
    --transition-duration-normal: 0s;
    --transition-duration-slow: 0s;
  }

  /* ====================================================================== */
  /* Module/card design language (CXO build-spec 2026-06-12, Part B1).      */
  /* Radius convergence (CXO #1172 call, 6/12): the incumbent               */
  /* --border-radius-* scale is canonical; the proposed --radius-* scale    */
  /* was dropped (CXO's "no radius scale" finding was stale).               */
  /* ====================================================================== */
  --surface-card: var(--color-neutral-white);
  --border-card: 1px solid var(--color-neutral-light-gray-4);
  --radius-card: var(--border-radius-lg);
  --shadow-card: var(--shadow-sm);        /* subtle at rest; dense modules want sm */
  --shadow-card-hover: var(--shadow-md);
  --space-card-pad: var(--space-lg);      /* 24px internal */
  --space-card-gap: var(--space-md);      /* 16px between card elements */
  --space-module-gap: var(--space-xl);    /* 32px between modules */
}

/* ===== UTILITY CLASSES ===== */

/* Text color utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-light { color: var(--color-text-light); }
.text-success { color: var(--color-accent-success); }
.text-danger { color: var(--color-accent-danger); }
.text-error { color: var(--color-accent-error); }
.text-warning { color: var(--color-accent-warning); }

/* Background color utilities */
.bg-primary { background-color: var(--color-background-primary); }
.bg-secondary { background-color: var(--color-background-secondary); }
.bg-success { background-color: var(--color-accent-success-light); }
.bg-danger { background-color: var(--color-accent-danger-light); }
.bg-error { background-color: var(--color-accent-error-light); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Border radius utilities */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }