/**
 * Forward Email Webmail - Design Tokens
 * ======================================
 * 
 * This file contains all design tokens (CSS custom properties) for the application.
 * It serves as the single source of truth for:
 * - Colors (brand, semantic, surfaces, text, borders)
 * - Spacing scale
 * - Border radius scale
 * - Typography scale
 * - Shadows
 * - Transitions
 * 
 * USAGE:
 * - Always use tokens instead of hardcoded values
 * - Dark mode is the default; light mode overrides are defined in body.light-mode
 * - Use semantic tokens (--text-primary) over raw colors (#e5e7eb) when possible
 */

:root {
  /* ============================================
     SHADCN-SVELTE THEME VARIABLES
     Required for shadcn-svelte components
     Light theme is default (shadcn standard)
     ============================================ */
  --radius: 0.5rem;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Light theme (default) - HSL values without hsl() wrapper */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 199 89% 49%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 199 89% 49%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --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: 217.2 91.2% 59.8%;

  /* ============================================
     BRAND COLORS
     Core brand identity colors
     ============================================ */
  --brand-blue: #00aff8;
  --brand-blue-light: #00c4ff;
  --brand-blue-dark: #0088cc;
  --brand-navy: #002a90;
  --brand-navy-light: #003db8;

  /* ============================================
     COLOR PALETTE
     Raw color values - use semantic tokens in components
     ============================================ */

  /* Blues */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* Cyans / Teals */
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;

  /* Greens */
  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* Reds */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* Yellows / Ambers */
  --yellow-50: #fefce8;
  --yellow-100: #fef3c7;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  /* Grays (Slate) - Dark mode surfaces */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-850: #0b1220;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;

  /* ============================================
     SEMANTIC COLORS
     Use these for UI elements
     ============================================ */

  /* Primary action color */
  --color-primary: var(--brand-blue);
  --color-primary-hover: var(--brand-blue-light);
  --color-primary-active: var(--brand-blue-dark);

  /* Secondary brand color */
  --color-secondary: var(--brand-navy);
  --color-secondary-hover: var(--brand-navy-light);

  /* Status colors */
  --color-success: var(--green-500);
  --color-success-light: var(--green-100);
  --color-success-text: #bbf7d0;

  --color-error: var(--red-500);
  --color-error-light: var(--red-100);
  --color-error-text: #fecdd3;

  --color-warning: var(--amber-500);
  --color-warning-light: var(--yellow-100);
  --color-warning-text: #fcd34d;

  --color-info: var(--blue-500);
  --color-info-light: var(--blue-100);

  /* ============================================
     SURFACE COLORS (Light Mode Default)
     Background colors for different elevation levels
     ============================================ */
  --surface-base: #f5f7fb; /* Page background */
  --surface-sunken: var(--slate-100); /* Lower than base */
  --surface-default: #ffffff; /* Default panels, cards */
  --surface-raised: #ffffff; /* Elevated elements */
  --surface-overlay: #ffffff; /* Modals, dropdowns */

  /* Additional surface tokens */
  --surface-card: #ffffff; /* Cards and content areas */
  --surface-panel: #ffffff; /* Side panels */
  --surface-sidebar: var(--slate-50); /* Sidebar background */
  --surface-modal: #ffffff; /* Modal background */
  --surface-elevated: #ffffff; /* Elevated content */
  --surface-tooltip: var(--slate-800); /* Tooltip background */
  --surface-toast: #ffffff; /* Toast notification background */
  --surface-hover: var(--slate-50); /* Hover state background */
  --surface-unread: rgba(14, 165, 233, 0.05); /* Unread item background */
  --surface-unread-hover: rgba(14, 165, 233, 0.08); /* Unread item hover */

  /* Backward compatibility aliases */
  --color-bg: #ffffff;
  --color-panel: #ffffff;
  --color-bg-secondary: var(--slate-100);
  --color-surface: var(--slate-50);
  --color-surface-strong: var(--slate-900);

  /* ============================================
     TEXT COLORS (Light Mode Default)
     ============================================ */
  --text-primary: var(--slate-900); /* Main text */
  --text-secondary: var(--slate-600); /* Subdued text */
  --text-muted: var(--slate-500); /* Very subdued text */
  --text-inverse: #ffffff; /* Text on dark backgrounds */
  --text-link: var(--blue-600); /* Link text */
  --text-link-hover: var(--blue-700); /* Link hover */

  /* Backward compatibility aliases */
  --color-text: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-text-secondary: var(--slate-500);

  /* ============================================
     BORDER COLORS (Light Mode Default)
     ============================================ */
  --border-default: var(--slate-200);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: var(--slate-300);
  --border-focus: var(--brand-blue);
  --border-error: var(--red-500);
  --border-success: var(--green-500);

  /* Backward compatibility aliases */
  --color-border: var(--border-default);
  --color-border-light: var(--slate-200);

  /* ============================================
     ACCENT COLORS
     For highlights, active states, etc.
     ============================================ */
  --color-accent: var(--brand-blue);
  --color-accent-hover: var(--brand-blue-light);
  --color-accent-muted: rgba(0, 175, 248, 0.15);
  --color-accent-strong: var(--green-500);

  /* ============================================
     SPACING SCALE
     Consistent spacing throughout the app
     Based on 4px base unit
     ============================================ */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============================================
     BORDER RADIUS SCALE
     Consistent rounding throughout the app
     ============================================ */
  --radius-none: 0;
  --radius-xs: 4px; /* Tiny elements, tooltips */
  --radius-sm: 6px; /* Chips, badges, small buttons */
  --radius-md: 8px; /* Buttons, inputs */
  --radius-lg: 10px; /* Cards, panels */
  --radius-xl: 12px; /* Larger cards, modals */
  --radius-2xl: 14px; /* Section containers */
  --radius-3xl: 16px; /* Page-level containers */
  --radius-full: 999px; /* Pills, avatars */

  /* ============================================
     TYPOGRAPHY SCALE
     Font sizes with corresponding line heights
     ============================================ */

  /* Font Families */
  --font-sans: var(
    --brand-font,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif
  );
  --font-serif: var(--brand-heading-font, Georgia, 'Times New Roman', serif);
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;

  /* Multiplier applied to every font size below. Defaults to 1 and is set at
   * runtime from the operating system's preferred text size (see
   * src/utils/os-text-scale.ts). Font sizes are the only thing scaled, so a
   * larger system text size does not stretch spacing or break layout.
   *
   * These tokens ARE Tailwind v4's font-size theme variables, so every
   * `text-sm` / `text-xs` / etc. utility in the app resolves through them and
   * scales from this one value. */
  --fe-text-scale: 1;

  /* Font Sizes */
  --text-2xs: calc(10px * var(--fe-text-scale));
  --text-xs: calc(11px * var(--fe-text-scale));
  --text-sm: calc(12px * var(--fe-text-scale));
  --text-base: calc(13px * var(--fe-text-scale));
  --text-md: calc(14px * var(--fe-text-scale));
  --text-lg: calc(15px * var(--fe-text-scale));
  --text-xl: calc(16px * var(--fe-text-scale));
  --text-2xl: calc(18px * var(--fe-text-scale));
  --text-3xl: calc(20px * var(--fe-text-scale));
  --text-4xl: calc(24px * var(--fe-text-scale));
  --text-5xl: calc(28px * var(--fe-text-scale));

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

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

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

  /* ============================================
     SHADOWS (Light Mode Default)
     Elevation system using box-shadows
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-3xl: 0 30px 80px rgba(0, 0, 0, 0.18);

  /* Colored shadows for accents */
  --shadow-primary: 0 4px 12px rgba(14, 165, 233, 0.15);
  --shadow-primary-lg: 0 8px 24px rgba(14, 165, 233, 0.2);
  --shadow-error: 0 4px 12px rgba(239, 68, 68, 0.15);
  --shadow-success: 0 4px 12px rgba(34, 197, 94, 0.15);

  /* Component-specific shadows */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.2);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Focus ring shadows */
  --shadow-focus: 0 0 0 3px rgba(14, 165, 233, 0.25);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.2);
  --shadow-focus-success: 0 0 0 3px rgba(34, 197, 94, 0.2);

  /* ============================================
     TRANSITIONS
     Animation timing and easing
     ============================================ */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --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-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common transition presets */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --transition-colors:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-fast) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-out);

  /* ============================================
     Z-INDEX SCALE
     Consistent stacking contexts
     ============================================ */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-drawer: 40;
  --z-modal-backdrop: 50;
  --z-modal: 60;
  --z-popover: 70;
  --z-tooltip: 80;
  --z-toast: 90;
  --z-max: 9999;

  /* ============================================
     COMPONENT-SPECIFIC TOKENS
     Pre-composed values for common components
     ============================================ */

  /* Buttons - minimum 44px for WCAG touch target compliance */
  --btn-height-sm: 44px;
  --btn-height-md: 44px;
  --btn-height-lg: 48px;
  --btn-padding-x-sm: var(--space-3);
  --btn-padding-x-md: var(--space-3-5);
  --btn-padding-x-lg: var(--space-4);

  /* Inputs - minimum 44px for WCAG touch target compliance */
  --input-height-sm: 44px;
  --input-height-md: 44px;
  --input-height-lg: 48px;
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2-5);

  /* Cards */
  --card-padding: var(--space-4);
  --card-padding-sm: var(--space-3);
  --card-padding-lg: var(--space-5);

  /* Tooltips */
  --tooltip-bg: var(--slate-700);
  --tooltip-text: #ffffff;
  --tooltip-padding-x: var(--space-2-5);
  --tooltip-padding-y: var(--space-1-5);

  /* Modals */
  --modal-padding-header: var(--space-5);
  --modal-padding-body: var(--space-6);
  --modal-padding-footer: var(--space-4) var(--space-6);
  --modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --modal-max-width: 500px;
  --modal-max-width-sm: 380px;
  --modal-max-width-lg: 600px;
  --modal-max-width-xl: 900px;
  --modal-border-radius: var(--radius-xl);
  --modal-mobile-breakpoint: 600px;
}

/* ============================================
   DARK MODE (for shadcn html.dark pattern)
   ============================================ */
.dark {
  /* shadcn dark theme variables — surface tokens are pure neutral
   * (hue 0, saturation 0) so dark mode reads as true black/grey rather
   * than blue. Previous palette held hue 240° at 4-6% sat which is
   * imperceptible per-pixel but tinted noticeably blue at full-window
   * scale. Primary cyan accent (199°) retained for highlights, rings,
   * and focus states. */
  --background: 0 0% 6%;
  --foreground: 0 0% 98%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 98%;
  --primary: 199 89% 49%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 16%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 65%;
  --accent: 0 0% 16%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 60.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 199 89% 49%;
  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 15.9%;
  --sidebar-accent-foreground: 0 0% 95.9%;
  --sidebar-border: 0 0% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;

  /* Surface colors — neutral greys (no blue slate tint). Lightness steps
   * mirror the previous slate-950→700 ramp so depth/elevation reads the same. */
  --surface-base: #0a0a0a;
  --surface-sunken: #0a0a0a;
  --surface-default: #141414;
  --surface-raised: #1a1a1a;
  --surface-overlay: #242424;
  --surface-card: #1a1a1a;
  --surface-panel: #141414;
  --surface-sidebar: #0a0a0a;
  --surface-modal: #242424;
  --surface-elevated: #242424;
  --surface-tooltip: #333333;
  --surface-toast: #242424;
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-unread: rgba(0, 175, 248, 0.08);
  --surface-unread-hover: rgba(0, 175, 248, 0.12);

  /* Backward compatibility */
  --color-bg: var(--surface-default);
  --color-panel: var(--surface-raised);
  --color-bg-secondary: #171717;
  --color-surface: #242424;
  --color-surface-strong: #ffffff;

  /* Text colors */
  --text-primary: var(--slate-200);
  --text-secondary: var(--slate-400);
  --text-muted: var(--slate-500);
  --text-inverse: var(--slate-900);
  --text-link: var(--blue-400);
  --text-link-hover: var(--blue-300);
  --color-text: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-text-secondary: var(--text-secondary);

  /* Border colors */
  --border-default: #333333;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: #404040;
  --color-border: var(--border-default);
  --color-border-light: #404040;

  /* Shadows (darker for dark mode) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.4);
  --shadow-3xl: 0 30px 80px rgba(0, 0, 0, 0.45);
  --shadow-primary: 0 8px 24px rgba(0, 175, 248, 0.25);
  --shadow-primary-lg: 0 12px 32px rgba(0, 175, 248, 0.35);
  --shadow-error: 0 8px 24px rgba(239, 68, 68, 0.25);
  --shadow-success: 0 8px 24px rgba(34, 197, 94, 0.25);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(0, 175, 248, 0.25);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.25);
  --shadow-focus-success: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

/* ============================================
   LIGHT MODE (backward compatibility)
   Light mode is now the default in :root.
   This section kept for legacy body.light-mode class.
   ============================================ */
body.light-mode {
  /* Explicit light mode - same as :root defaults */
}

/* ============================================
   PRINT STYLES
   Simplified colors for printing
   ============================================ */
@media print {
  :root {
    --surface-default: #ffffff;
    --surface-raised: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-default: #cccccc;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   For users who prefer high contrast
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --border-default: var(--slate-500);
    --border-subtle: var(--slate-600);
  }

  body.light-mode {
    --border-default: var(--slate-400);
    --border-subtle: var(--slate-500);
  }
}

/* ============================================
   REDUCED MOTION
   Disable animations for users who prefer it
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}
