/* ============================================
   CLARITYSEEK DESIGN SYSTEM v2.0
   2025 Modern Design Tokens
   ============================================ */

:root {
  /* ─────────────────────────────────────────
     COLOR TOKENS
     ───────────────────────────────────────── */

  /* Brand Primary - Blue */
  --brand-primary: #5168AF;
  --brand-primary-50: #EEF1F8;
  --brand-primary-100: #D5DBF0;
  --brand-primary-200: #B3BDE3;
  --brand-primary-300: #919FD6;
  --brand-primary-400: #7183C3;
  --brand-primary-500: #5168AF;
  --brand-primary-600: #4258A0;
  --brand-primary-700: #354889;
  --brand-primary-800: #293971;
  --brand-primary-900: #1E2A5A;

  /* Brand Accent - Purple */
  --brand-accent: #6E4196;
  --brand-accent-50: #F5F0F8;
  --brand-accent-100: #E8DDEF;
  --brand-accent-200: #D4C0E2;
  --brand-accent-300: #BFA3D4;
  --brand-accent-400: #9772B5;
  --brand-accent-500: #6E4196;
  --brand-accent-600: #5E3580;
  --brand-accent-700: #4E2A6A;
  --brand-accent-800: #3E2054;
  --brand-accent-900: #2E163E;

  /* Brand Neutral - Gray */
  --brand-neutral: #9298A4;
  --brand-neutral-50: #F8F9FA;
  --brand-neutral-100: #F1F3F5;
  --brand-neutral-200: #E9ECEF;
  --brand-neutral-300: #DEE2E6;
  --brand-neutral-400: #CED4DA;
  --brand-neutral-500: #9298A4;
  --brand-neutral-600: #6B7280;
  --brand-neutral-700: #4B5563;
  --brand-neutral-800: #374151;
  --brand-neutral-900: #1F2937;

  /* Semantic Colors */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark: #059669;

  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #D97706;

  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-dark: #DC2626;

  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-info-dark: #2563EB;

  /* Surface Colors - Light Mode */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F8FAFC;
  --surface-tertiary: #F1F5F9;
  --surface-elevated: #FFFFFF;

  /* Text Colors - Light Mode */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --text-disabled: #CBD5E1;
  --text-inverse: #FFFFFF;

  /* Border Colors - Light Mode */
  --border-default: #E2E8F0;
  --border-subtle: #F1F5F9;
  --border-strong: #CBD5E1;
  --border-focus: #5168AF;

  /* ─────────────────────────────────────────
     TYPOGRAPHY TOKENS
     ───────────────────────────────────────── */

  /* Font Families */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* Font Sizes - Fluid Scale */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.1875vw, 0.75rem);      /* 11-12px */
  --text-sm: clamp(0.8125rem, 0.775rem + 0.1875vw, 0.875rem);    /* 13-14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.1875vw, 1rem);        /* 15-16px */
  --text-lg: clamp(1.0625rem, 1rem + 0.3125vw, 1.125rem);        /* 17-18px */
  --text-xl: clamp(1.1875rem, 1.1rem + 0.4375vw, 1.25rem);       /* 19-20px */
  --text-2xl: clamp(1.375rem, 1.25rem + 0.625vw, 1.5rem);        /* 22-24px */
  --text-3xl: clamp(1.625rem, 1.45rem + 0.875vw, 1.875rem);      /* 26-30px */
  --text-4xl: clamp(2rem, 1.75rem + 1.25vw, 2.25rem);            /* 32-36px */
  --text-5xl: clamp(2.5rem, 2.1rem + 2vw, 3rem);                 /* 40-48px */
  --text-6xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);              /* 48-60px */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ─────────────────────────────────────────
     SPACING TOKENS (8px base)
     ───────────────────────────────────────── */

  --space-px: 1px;
  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-11: 2.75rem;    /* 44px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */
  --space-32: 8rem;       /* 128px */
  --space-36: 9rem;       /* 144px */
  --space-40: 10rem;      /* 160px */
  --space-48: 12rem;      /* 192px */
  --space-56: 14rem;      /* 224px */
  --space-64: 16rem;      /* 256px */

  /* ─────────────────────────────────────────
     BORDER RADIUS TOKENS
     ───────────────────────────────────────── */

  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px */
  --radius-default: 0.375rem; /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.25rem;    /* 20px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* ─────────────────────────────────────────
     SHADOW TOKENS
     ───────────────────────────────────────── */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Colored Shadows */
  --shadow-primary: 0 4px 14px 0 rgba(81, 104, 175, 0.25);
  --shadow-primary-lg: 0 10px 25px -3px rgba(81, 104, 175, 0.3);
  --shadow-accent: 0 4px 14px 0 rgba(110, 65, 150, 0.25);
  --shadow-accent-lg: 0 10px 25px -3px rgba(110, 65, 150, 0.3);

  /* ─────────────────────────────────────────
     GLASS/BLUR TOKENS
     ───────────────────────────────────────── */

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(16px);
  --blur-xl: blur(24px);
  --blur-2xl: blur(40px);
  --blur-3xl: blur(64px);

  /* ─────────────────────────────────────────
     ANIMATION TOKENS
     ───────────────────────────────────────── */

  /* Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Timing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);

  /* ─────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────── */

  --z-behind: -1;
  --z-default: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-max: 9999;

  /* ─────────────────────────────────────────
     BREAKPOINTS (for reference in JS)
     ───────────────────────────────────────── */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ─────────────────────────────────────────
     COMPONENT-SPECIFIC TOKENS
     ───────────────────────────────────────── */

  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 72px;

  /* Navbar */
  --navbar-height: 64px;

  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* Input */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;

  /* Button */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
}

/* ─────────────────────────────────────────
   DARK MODE OVERRIDES
   ───────────────────────────────────────── */

[data-theme="dark"] {
  /* Surface Colors */
  --surface-primary: #0F172A;
  --surface-secondary: #1E293B;
  --surface-tertiary: #334155;
  --surface-elevated: #1E293B;

  /* Text Colors */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-disabled: #64748B;
  --text-inverse: #0F172A;

  /* Border Colors */
  --border-default: #334155;
  --border-subtle: #1E293B;
  --border-strong: #475569;
  --border-focus: #7B8CC4;

  /* Glass */
  --glass-bg: rgba(15, 23, 42, 0.72);
  --glass-bg-hover: rgba(15, 23, 42, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);

  /* Shadows (more visible in dark mode) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ─────────────────────────────────────────
   BASE RESET & DEFAULTS
   ───────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  transition: background-color var(--duration-200) var(--ease-out),
              color var(--duration-200) var(--ease-out);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background-color: var(--brand-primary-200);
  color: var(--brand-primary-900);
}

[data-theme="dark"] ::selection {
  background-color: var(--brand-primary-700);
  color: var(--brand-primary-100);
}

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

/* Headings */
.text-display-2xl {
  font-size: var(--text-6xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.text-display-xl {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display-lg {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

.text-display-md {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.text-display-sm {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

/* Body Text */
.text-body-xl {
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
}

.text-body-lg {
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
}

.text-body-md {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

.text-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

.text-body-xs {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

/* Labels */
.text-label-lg {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-label-md {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-label-sm {
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Code/Mono */
.text-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--surface-tertiary);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
}

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-disabled { color: var(--text-disabled); }
.text-inverse { color: var(--text-inverse); }
.text-brand { color: var(--brand-primary); }
.text-accent { color: var(--brand-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Font Weights */
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}