/* ==========================================================================
   CherryAI EAM Design Tokens v3.0 — CherryAI Brand Theme
   
   Single source of truth for all design primitives.
   DO NOT add new colors outside this file.
   
   Architecture: :root = LIGHT defaults, html.dark = DARK overrides
   Brand: CherryAI — Primary Red #cf3339, Navy #081e3a
   ADR-010: No hard-coded hex outside tokens.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     BRAND COLORS — CherryAI Palette (same in both modes)
     Primary: Brand Red #cf3339
     Secondary: Brand Navy #081e3a
     ========================================================================== */
  --color-brand-900: #051424;
  --color-brand-800: #081e3a;
  --color-brand-700: #0f2d52;
  --color-brand-600: #1a3a5c;
  --color-brand-550: #244a6e;
  --color-brand-500: #cf3339;
  --color-brand-450: #b82d32;
  --color-brand-200: #fce8e8;
  --color-brand-100: #fef2f2;

  --color-accent: #cf3339;
  --color-accent-hover: #b82d32;
  --color-accent-light: #e26e66;
  --color-accent-soft: rgba(207, 51, 57, 0.1);
  --color-accent-glow: rgba(207, 51, 57, 0.2);
  
  /* ==========================================================================
     SURFACE COLORS (Light Mode)
     ========================================================================== */
  --color-surface-0: #f8fafc;
  --color-surface-1: #ffffff;
  --color-surface-2: #fafbfd;
  --color-surface-3: #f1f5f9;
  
  /* ==========================================================================
     BORDER COLORS (Light Mode)
     ========================================================================== */
  --color-border-1: #e2e8f0;
  --color-border-2: #cbd5e1;
  --color-border-3: #f1f5f9;
  
  /* ==========================================================================
     TEXT COLORS (Light Mode)
     ========================================================================== */
  --color-text-1: #0f172a;
  --color-text-2: #475569;
  --color-text-3: #64748b;
  --color-text-4: #94a3b8;
  --color-text-inverse: #f8fafc;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.7);
  --color-text-inverse-subtle: rgba(255, 255, 255, 0.5);
  --color-text-inverse-faint: rgba(255, 255, 255, 0.4);
  
  /* ==========================================================================
     SEMANTIC COLORS - SUCCESS
     ========================================================================== */
  --color-success-700: #166534;
  --color-success-600: #22c55e;
  --color-success-500: #10b981;
  --color-success-400: #34d399;
  --color-success-100: #dcfce7;
  --color-success-50: #f0fdf4;
  
  /* ==========================================================================
     SEMANTIC COLORS - WARNING
     ========================================================================== */
  --color-warning-700: #92400e;
  --color-warning-600: #f59e0b;
  --color-warning-500: #fbbf24;
  --color-warning-100: #fef3c7;
  --color-warning-50: #fefce8;
  
  /* ==========================================================================
     SEMANTIC COLORS - DANGER
     ========================================================================== */
  --color-danger-700: #991b1b;
  --color-danger-600: #ef4444;
  --color-danger-500: #f87171;
  --color-danger-100: #fee2e2;
  --color-danger-50: #fef2f2;
  
  /* ==========================================================================
     SEMANTIC COLORS - INFO
     ========================================================================== */
  --color-info-700: #1d4ed8;
  --color-info-600: #3b82f6;
  --color-info-500: #60a5fa;
  --color-info-100: #dbeafe;
  --color-info-50: #eff6ff;
  
  /* ==========================================================================
     FOCUS & DISABLED STATES
     ========================================================================== */
  --color-focus: #cf3339;
  --color-focus-ring: rgba(207, 51, 57, 0.2);
  --color-focus-ring-strong: rgba(207, 51, 57, 0.15);
  --color-disabled-bg: #f1f5f9;
  --color-disabled-text: #94a3b8;
  --color-disabled-border: #e2e8f0;
  
  /* ==========================================================================
     OVERLAYS
     ========================================================================== */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  --color-overlay-light: rgba(255, 255, 255, 0.1);
  --color-overlay-light-hover: rgba(255, 255, 255, 0.15);
  
  /* ==========================================================================
     SEMANTIC LAYER — Light Mode Defaults
     These are the PRIMARY variables used by components.
     ========================================================================== */
  --surface-app: #f8fafc;
  --surface-primary: #ffffff;
  --surface-secondary: #f1f5f9;
  --surface-tertiary: #e2e8f0;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;
  --text-on-brand: #ffffff;
  /* Alias the --color-text-* namespace some components (cockpit-v2) expect onto the real
     --text-* tokens. Previously undefined → fell back to #111 (invisible on dark). These
     reference --text-* (themed per mode), so one definition covers light + dark. (Dean 2026-06-01) */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-tertiary: var(--text-muted);
  /* NOTE: do NOT alias --color-text-inverse here — modern.css defines
     --text-inverse: var(--color-text-inverse), so aliasing it back would form a cycle
     (invalidating inverse text on dark headers/status pills). It stays a constant light
     value defined earlier in :root. (Codex P1, PR #500.) */
  /* Red used as TEXT/links. Light: brand red on white reads fine. Dark: brightened below. */
  --accent-text: #cf3339;

  --border-primary: rgba(0, 0, 0, 0.12);
  --border-secondary: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.2);

  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(207, 51, 57, 0.15);
  --shadow-hero: 0 4px 20px rgba(0, 0, 0, 0.08);

  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.15);
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --input-focus-ring: rgba(207, 51, 57, 0.25);

  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --card-hover-border: rgba(0, 0, 0, 0.15);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);

  --table-header-bg: #f8fafc;
  --table-header-text: #475569;
  --table-row-hover: rgba(0, 0, 0, 0.03);
  --table-border: rgba(0, 0, 0, 0.06);
  --table-zebra: rgba(0, 0, 0, 0.02);

  --btn-primary-bg: #cf3339;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #b82d32;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: rgba(0, 0, 0, 0.15);
  --btn-secondary-text: #475569;
  --btn-secondary-hover-bg: rgba(0, 0, 0, 0.05);

  --sidebar-bg: #081e3a;
  --sidebar-text: #cbd5e1;
  --sidebar-active-bg: rgba(207, 51, 57, 0.15);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  --transition-fast: 150ms ease;
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms ease-out;

  /* ==========================================================================
     TYPOGRAPHY SCALE
     ========================================================================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Modern everywhere (Dean, 2026-06-01): no monospace "receipt" font for codes/IDs/numbers.
     --font-mono now resolves to the same Inter sans stack; tabular alignment is preserved
     via font-feature-settings "tnum" wherever it's set. Inter is loaded via the @import above. */
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v2-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-42: 2.625rem;
  
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  
  --line-height-tight: 1.1;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* ==========================================================================
     SPACING SCALE
     ========================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.625rem;
  --space-5: 0.75rem;
  --space-6: 0.875rem;
  --space-7: 1rem;
  --space-8: 1.25rem;
  --space-9: 1.5rem;
  --space-10: 1.75rem;
  --space-11: 2rem;
  --space-12: 2.5rem;
  --space-13: 3rem;
  --space-14: 4rem;
  
  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  
  /* ==========================================================================
     FOCUS RINGS
     ========================================================================== */
  --ring-focus: 0 0 0 3px var(--color-focus-ring);
  --ring-focus-visible: 0 0 0 4px var(--color-focus-ring-strong);
  
  /* ==========================================================================
     MOTION / TRANSITIONS
     ========================================================================== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-normal: 0.25s;
  --dur-slow: 0.3s;
  
  /* ==========================================================================
     GRADIENTS — CherryAI Brand
     ========================================================================== */
  --gradient-brand: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  --gradient-hero: linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-700) 100%);
  --gradient-header: linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-900) 100%);
  --gradient-sidebar: linear-gradient(180deg, var(--color-brand-800) 0%, var(--color-brand-900) 100%);
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */
/* ==========================================================================
   PR #116d.1 — ULTRA-PREMIUM LUXURY EXTENSION
   Locked 2026-05-17.
   Adds: density modes (compact/comfortable/spacious), Apple-tier motion
   curves, multi-layer luxury shadows, glass-blur tokens, brand-glow tokens,
   gradient-border tokens, animated count-up duration, reduced-motion.
   Reference: Linear × Vercel × Arc × Notion Calendar.
   ========================================================================== */

:root {
  /* ----- DENSITY MODES (Compact / Comfortable / Spacious) ----- */
  /* Defaults = Comfortable. html.density-compact / html.density-spacious override */
  --density-card-padding: 20px 22px;
  --density-card-gap: 16px;
  --density-section-gap: 36px;
  --density-page-padding: 40px 56px 96px;
  --density-row-height: 44px;
  --density-tile-padding: 14px 16px;
  --density-form-input-h: 40px;

  /* ----- LUXURY SHADOWS — multi-layer depth, NOT flat ----- */
  --shadow-card-luxe:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 6px 14px -2px rgba(0, 0, 0, 0.06),
    0 24px 48px -12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card-luxe-hover:
    0 2px 2px rgba(0, 0, 0, 0.05),
    0 12px 24px -2px rgba(0, 0, 0, 0.10),
    0 36px 72px -12px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-elevation-1:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-elevation-2:
    0 4px 8px -2px rgba(0, 0, 0, 0.08),
    0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-elevation-3:
    0 8px 16px -4px rgba(0, 0, 0, 0.10),
    0 4px 8px -2px rgba(0, 0, 0, 0.06);
  --shadow-elevation-4:
    0 16px 32px -8px rgba(0, 0, 0, 0.12),
    0 8px 16px -4px rgba(0, 0, 0, 0.08);
  --shadow-elevation-5:
    0 32px 64px -16px rgba(0, 0, 0, 0.15),
    0 16px 32px -8px rgba(0, 0, 0, 0.10);

  /* ----- BRAND GLOW — for Critical band cards, focus rings, primary CTA ----- */
  --glow-brand: 0 0 24px -4px rgba(207, 51, 57, 0.35);
  --glow-brand-strong: 0 0 32px -2px rgba(207, 51, 57, 0.50);
  --glow-critical: 0 0 24px -4px rgba(239, 68, 68, 0.40);
  --glow-warning: 0 0 22px -4px rgba(245, 158, 11, 0.35);
  --glow-success: 0 0 22px -4px rgba(16, 185, 129, 0.30);

  /* ----- GLASS / BACKDROP-BLUR ----- */
  --glass-blur-sm: blur(12px) saturate(160%);
  --glass-blur-md: blur(24px) saturate(180%);
  --glass-blur-lg: blur(40px) saturate(200%);
  --glass-tint-light: rgba(255, 255, 255, 0.70);
  --glass-tint-light-soft: rgba(255, 255, 255, 0.50);
  --glass-tint-light-strong: rgba(255, 255, 255, 0.85);
  --glass-tint-dark: rgba(20, 25, 42, 0.65);
  --glass-tint-dark-soft: rgba(20, 25, 42, 0.40);
  --glass-tint-dark-strong: rgba(6, 8, 18, 0.85);

  /* ----- GRADIENT BORDERS (use as box-shadow ring or border-image) ----- */
  --gradient-border-subtle: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  --gradient-border-brand: linear-gradient(135deg, rgba(207,51,57,0.55), rgba(207,51,57,0.10));
  --gradient-card-sheen: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);

  /* ----- APPLE-TIER MOTION CURVES ----- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --dur-instant: 80ms;
  --dur-quick: 160ms;
  --dur-base: 240ms;
  --dur-relaxed: 360ms;
  --dur-cinematic: 520ms;
  --dur-count-up: 1200ms;

  --hover-lift-sm: translateY(-1px);
  --hover-lift-md: translateY(-3px);
  --hover-lift-lg: translateY(-5px);
  --click-press: scale(0.97);
}

/* ----- DENSITY MODE OVERRIDES ----- */
html.density-compact {
  --density-card-padding: 12px 14px;
  --density-card-gap: 10px;
  --density-section-gap: 24px;
  --density-page-padding: 24px 32px 64px;
  --density-row-height: 32px;
  --density-tile-padding: 8px 10px;
  --density-form-input-h: 32px;
}

html.density-spacious {
  --density-card-padding: 28px 32px;
  --density-card-gap: 24px;
  --density-section-gap: 56px;
  --density-page-padding: 56px 72px 128px;
  --density-row-height: 56px;
  --density-tile-padding: 20px 24px;
  --density-form-input-h: 48px;
}

/* ----- REDUCED-MOTION: kill transitions + animations ----- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-quick: 0ms;
    --dur-base: 0ms;
    --dur-relaxed: 0ms;
    --dur-cinematic: 0ms;
    --dur-count-up: 0ms;
    --hover-lift-sm: none;
    --hover-lift-md: none;
    --hover-lift-lg: none;
    --click-press: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   DARK MODE OVERRIDES (existing — kept)
   ========================================================================== */
html.dark {
  /* Luxury shadow overrides for dark canvas */
  --shadow-card-luxe:
    0 1px 1px rgba(0, 0, 0, 0.40),
    0 6px 14px -2px rgba(0, 0, 0, 0.45),
    0 24px 48px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card-luxe-hover:
    0 2px 2px rgba(0, 0, 0, 0.40),
    0 12px 24px -2px rgba(0, 0, 0, 0.50),
    0 36px 72px -12px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-brand: 0 0 24px -2px rgba(239, 68, 72, 0.45);
  --glow-brand-strong: 0 0 36px 0 rgba(239, 68, 72, 0.65);
  --gradient-border-subtle: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  --gradient-card-sheen: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);

  --color-surface-0: #0a0f1a;
  --color-surface-1: #111827;
  --color-surface-2: #1a2234;
  --color-surface-3: #1e293b;
  --color-border-1: rgba(255, 255, 255, 0.1);
  --color-border-2: rgba(255, 255, 255, 0.12);
  --color-border-3: rgba(255, 255, 255, 0.06);
  --color-text-1: #f1f5f9;
  --color-text-2: #cbd5e1;
  --color-text-3: #8896ab;
  --color-text-4: #94a3b8;

  --surface-app: #0a0f1a;
  --surface-primary: #111827;
  --surface-secondary: #1e293b;
  --surface-tertiary: #334155;
  --surface-elevated: #1a2332;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #f8fafc;
  /* Brighter secondary/muted for readability on dark (Dean 2026-06-01: "so dim, unreadable").
     secondary slate-400→slate-300, muted slate-500→slate-400. */
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;
  /* Dark-bg red readability (Dean 2026-06-01: "dark reds on dark blue impossible to read").
     The brand red #cf3339 is too dark as text/links on navy. Brighten the red tokens used for
     text & accents to the brand's own #ff5a5f (already in the gradient palette). Red button
     backgrounds also brighten but white labels stay legible (bold). */
  --accent-text: #ff5a5f;
  --cherry-red: #ff5a5f;
  --cherry-primary: #ff5a5f;
  --color-accent: #ff5a5f;
  --color-brand-500: #ff5a5f;
  --danger: #ff6b6b;
  --color-danger-600: #ff6b6b;
  --color-danger-700: #ff8585; /* maroon #991b1b is unreadable on dark danger-tint badges → brighten */

  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --input-bg: #1a2332;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-text: #f1f5f9;
  --input-placeholder: #64748b;

  --card-bg: #111827;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-hover-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);

  --table-header-bg: #1e293b;
  --table-header-text: #cbd5e1;
  --table-row-hover: rgba(255, 255, 255, 0.03);
  --table-border: rgba(255, 255, 255, 0.06);
  --table-zebra: rgba(255, 255, 255, 0.02);

  --btn-secondary-border: rgba(255, 255, 255, 0.15);
  --btn-secondary-text: #cbd5e1;
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.05);

  --color-disabled-bg: #1e293b;
  --color-disabled-text: #64748b;
  --color-disabled-border: rgba(255, 255, 255, 0.1);
}