/* ============================================================
   4USENDER Design System Tokens — Single Source of Truth
   All colors, spacing, typography, shadows defined here.
   Components live in /static/css/components/*.css
   ============================================================ */

:root {
  /* ========== BACKGROUNDS ========== */
  --bg-app:           #0a0a0a;
  --bg-sidebar:       #0f0f0f;
  --bg-surface:       #141414;
  --bg-surface-hover: #1a1a1a;
  --bg-surface-2:     #1e1e1e;
  --bg-input:         #141414;
  --bg-input-focus:   #1a1a1a;

  /* Backward-compat aliases (templates still use these names) */
  --bg-primary:   var(--bg-app);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary:  var(--bg-surface-2);

  /* ========== BORDERS ========== */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover:   rgba(255, 255, 255, 0.12);
  --border-focus:   rgba(255, 255, 255, 0.20);
  --border-accent:  rgba(59, 130, 246, 0.50);

  /* Aliases */
  --border-primary: var(--border-default);
  --border:         var(--border-default);

  /* ========== TEXT ========== */
  --text-primary:   #fafafa;
  --text-secondary: #a1a1a1;
  --text-tertiary:  #8a8a8a;  /* WCAG AA: 5.0:1 on --bg-app (was #666666 = 3.66:1, failed AA for body text) */
  --text-disabled:  #404040;
  --text-inverse:   #0a0a0a;

  /* ========== ACCENT / BRAND ========== */
  --accent-primary:        #3b82f6;
  --accent-primary-hover:  #2563eb;
  --accent-primary-active: #1d4ed8;
  --accent-subtle:         rgba(59, 130, 246, 0.10);
  --accent-subtle-hover:   rgba(59, 130, 246, 0.15);

  /* Alias */
  --primary: var(--accent-primary);

  /* ========== STATUS COLORS ========== */
  --status-success:        #22c55e;
  --status-success-bg:     rgba(34, 197, 94, 0.10);
  --status-success-border: rgba(34, 197, 94, 0.25);

  --status-warning:        #f59e0b;
  --status-warning-bg:     rgba(245, 158, 11, 0.10);
  --status-warning-border: rgba(245, 158, 11, 0.25);

  --status-error:          #ef4444;
  --status-error-bg:       rgba(239, 68, 68, 0.10);
  --status-error-border:   rgba(239, 68, 68, 0.25);

  --status-info:           #3b82f6;
  --status-info-bg:        rgba(59, 130, 246, 0.10);
  --status-info-border:    rgba(59, 130, 246, 0.25);

  --status-neutral:        #a1a1a1;
  --status-neutral-bg:     rgba(161, 161, 161, 0.10);
  --status-neutral-border: rgba(161, 161, 161, 0.25);

  --status-clicked:        #8b5cf6;
  --status-clicked-bg:     rgba(139, 92, 246, 0.10);
  --status-clicked-border: rgba(139, 92, 246, 0.25);

  /* Semantic aliases (used in analytics, settings, verification) */
  --success:       var(--status-success);
  --warning:       var(--status-warning);
  --danger:        var(--status-error);
  --info:          var(--status-info);
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-danger:  var(--status-error);
  --color-muted:   var(--text-tertiary);
  --color-surface: var(--bg-surface);

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60);

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro",
               Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Type scale (major third — 1.250) */
  --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-display: 2.5rem;

  /* Line heights */
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

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

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

  /* ========== SPACING (8px base grid) ========== */
  --space-0:   0;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --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-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* ========== BORDER RADIUS ========== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ========== TRANSITIONS ========== */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ========== Z-INDEX ========== */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ========== LAYOUT ========== */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 56px;
  --content-max-width:       1400px;
  --inbox-list-width:        360px;
  --inbox-sidebar-width:     280px;
  --inbox-folder-width:      240px;
}

/* ========== BASE RESET ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  min-height: 100vh;
}

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* Focus-visible: consistent, accessible focus ring */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========== UTILITY CLASSES ========== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.text-muted   { color: var(--text-secondary); }
.text-subtle  { color: var(--text-tertiary); }
.text-success { color: var(--status-success); }
.text-danger  { color: var(--status-error); }
.text-error   { color: var(--status-error); }
.text-warning { color: var(--status-warning); }
.text-info    { color: var(--status-info); }
.text-primary { color: var(--text-primary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.flex       { display: flex; }
.inline-flex{ display: inline-flex; }
.grid       { display: grid; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.hidden { display: none !important; }

/* Links */
a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-primary-hover); }
.link { color: var(--accent-primary); }
.link:hover { color: var(--accent-primary-hover); text-decoration: underline; }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { animation: none !important; background: var(--bg-surface-2) !important; }
}