/**
 * TradLab UI Design Tokens v1.0
 * Source hierarchy:
 * 1) docs/brand/VISUAL_IDENTITY.md
 * 2) docs/ui/UI-FOUNDATION-v1.md
 *
 * Brand primitives are frozen.
 * Semantic UI tokens below are implementation decisions derived from them.
 */

:root {
  /* ------------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------------ */
  --tl-font-fa: "IRANSansXNoEn", Tahoma, ui-sans-serif, system-ui, sans-serif;
  --tl-font-latin: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --tl-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --tl-font-size-xs: 0.75rem;
  --tl-font-size-sm: 0.8125rem;
  --tl-font-size-md: 0.875rem;
  --tl-font-size-base: 1rem;
  --tl-font-size-lg: 1.125rem;
  --tl-font-size-xl: 1.25rem;
  --tl-font-size-2xl: 1.5rem;
  --tl-font-size-3xl: 1.875rem;
  --tl-font-size-4xl: 2.25rem;

  --tl-line-height-tight: 1.25;
  --tl-line-height-ui: 1.5;
  --tl-line-height-body: 1.75;

  --tl-font-weight-regular: 400;
  --tl-font-weight-medium: 500;
  --tl-font-weight-semibold: 600;
  --tl-font-weight-bold: 700;
  --tl-font-weight-heavy: 800;

  /* ------------------------------------------------------------------
   * Frozen brand primitives
   * ------------------------------------------------------------------ */
  --tl-brand-midnight: #0a0f1e;
  --tl-brand-charcoal: #111827;
  --tl-brand-cyan: #00d1ff;
  --tl-brand-teal: #14b8a6;
  --tl-brand-violet: #8b5cf6;
  --tl-brand-green: #22c55e;
  --tl-brand-white: #f8fafc;

  /* Supporting neutrals for UI hierarchy */
  --tl-neutral-50: #f8fafc;
  --tl-neutral-100: #f1f5f9;
  --tl-neutral-200: #e2e8f0;
  --tl-neutral-300: #cbd5e1;
  --tl-neutral-400: #94a3b8;
  --tl-neutral-500: #64748b;
  --tl-neutral-600: #475569;
  --tl-neutral-700: #334155;
  --tl-neutral-800: #1e293b;
  --tl-neutral-900: #0f172a;
  --tl-neutral-950: #020617;

  /* Status primitives. Status colors are semantic, never decorative. */
  --tl-status-success: #22c55e;
  --tl-status-danger: #ef4444;
  --tl-status-warning: #f59e0b;
  --tl-status-info: #00d1ff;
  --tl-status-ai: #8b5cf6;

  /* ------------------------------------------------------------------
   * Product identity
   * ------------------------------------------------------------------ */
  --tl-product-master-accent: var(--tl-brand-cyan);
  --tl-product-master-accent-2: var(--tl-brand-teal);
  --tl-product-ai-accent: var(--tl-brand-violet);
  --tl-product-bot-accent: var(--tl-brand-teal);
  --tl-product-bot-runtime: var(--tl-brand-green);

  /* Defaults; overridden by [data-product]. */
  --tl-accent: var(--tl-product-master-accent);
  --tl-accent-secondary: var(--tl-product-master-accent-2);

  /* ------------------------------------------------------------------
   * Spacing: 4px base grid
   * ------------------------------------------------------------------ */
  --tl-space-0: 0;
  --tl-space-1: 0.25rem;
  --tl-space-2: 0.5rem;
  --tl-space-3: 0.75rem;
  --tl-space-4: 1rem;
  --tl-space-5: 1.25rem;
  --tl-space-6: 1.5rem;
  --tl-space-8: 2rem;
  --tl-space-10: 2.5rem;
  --tl-space-12: 3rem;
  --tl-space-16: 4rem;
  --tl-space-20: 5rem;
  --tl-space-24: 6rem;

  /* ------------------------------------------------------------------
   * Shape
   * ------------------------------------------------------------------ */
  --tl-radius-xs: 0.375rem;
  --tl-radius-sm: 0.5rem;
  --tl-radius-md: 0.75rem;
  --tl-radius-lg: 1rem;
  --tl-radius-xl: 1.25rem;
  --tl-radius-2xl: 1.5rem;
  --tl-radius-pill: 999px;

  /* ------------------------------------------------------------------
   * Controls
   * ------------------------------------------------------------------ */
  --tl-control-height-sm: 2rem;
  --tl-control-height-md: 2.5rem;
  --tl-control-height-lg: 3rem;
  --tl-control-padding-inline: 0.875rem;

  /* ------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------ */
  --tl-content-max: 90rem;
  --tl-reading-max: 48rem;
  --tl-sidebar-compact: 4.5rem;
  --tl-sidebar-wide: 15rem;
  --tl-topbar-height: 4rem;

  /* ------------------------------------------------------------------
   * Motion
   * ------------------------------------------------------------------ */
  --tl-duration-instant: 80ms;
  --tl-duration-fast: 140ms;
  --tl-duration-base: 200ms;
  --tl-duration-slow: 280ms;

  --tl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tl-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ------------------------------------------------------------------
   * Focus
   * ------------------------------------------------------------------ */
  --tl-focus-width: 2px;
  --tl-focus-offset: 2px;
  --tl-focus-color: var(--tl-brand-cyan);

  /* ------------------------------------------------------------------
   * Z-index
   * ------------------------------------------------------------------ */
  --tl-z-base: 0;
  --tl-z-sticky: 20;
  --tl-z-dropdown: 40;
  --tl-z-overlay: 60;
  --tl-z-modal: 80;
  --tl-z-toast: 100;
}

/* --------------------------------------------------------------------
 * Product accents
 * -------------------------------------------------------------------- */
[data-product="tradlab"] {
  --tl-accent: var(--tl-brand-cyan);
  --tl-accent-secondary: var(--tl-brand-teal);
}

[data-product="ai"] {
  --tl-accent: var(--tl-brand-violet);
  --tl-accent-secondary: var(--tl-brand-cyan);
}

[data-product="bot"] {
  --tl-accent: var(--tl-brand-teal);
  --tl-accent-secondary: var(--tl-brand-cyan);
}

/* --------------------------------------------------------------------
 * Dark theme
 * -------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --tl-bg-canvas: #070b16;
  --tl-bg-subtle: var(--tl-brand-midnight);
  --tl-bg-surface: var(--tl-brand-charcoal);
  --tl-bg-surface-raised: #162033;
  --tl-bg-surface-overlay: #1b2740;

  --tl-text-primary: var(--tl-brand-white);
  --tl-text-secondary: var(--tl-neutral-300);
  --tl-text-muted: var(--tl-neutral-400);
  --tl-text-disabled: var(--tl-neutral-500);
  --tl-text-inverse: var(--tl-brand-midnight);

  --tl-border-subtle: rgba(148, 163, 184, 0.10);
  --tl-border-default: rgba(148, 163, 184, 0.18);
  --tl-border-strong: rgba(148, 163, 184, 0.30);

  --tl-surface-accent: color-mix(in srgb, var(--tl-accent) 7%, transparent);
  --tl-border-accent: color-mix(in srgb, var(--tl-accent) 28%, transparent);

  --tl-success-surface: rgba(34, 197, 94, 0.07);
  --tl-success-border: rgba(34, 197, 94, 0.24);
  --tl-danger-surface: rgba(239, 68, 68, 0.07);
  --tl-danger-border: rgba(239, 68, 68, 0.24);
  --tl-warning-surface: rgba(245, 158, 11, 0.07);
  --tl-warning-border: rgba(245, 158, 11, 0.24);
  --tl-info-surface: rgba(0, 209, 255, 0.055);
  --tl-info-border: rgba(0, 209, 255, 0.22);
  --tl-ai-surface: rgba(139, 92, 246, 0.07);
  --tl-ai-border: rgba(139, 92, 246, 0.24);

  --tl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.16);
  --tl-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16);
  --tl-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.24);
  --tl-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.30);

  --tl-glow-accent: 0 0 0 1px color-mix(in srgb, var(--tl-accent) 14%, transparent),
    0 0 20px color-mix(in srgb, var(--tl-accent) 6%, transparent);
}

/* --------------------------------------------------------------------
 * Light theme
 * -------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --tl-bg-canvas: #f6f9fc;
  --tl-bg-subtle: var(--tl-brand-white);
  --tl-bg-surface: #ffffff;
  --tl-bg-surface-raised: #ffffff;
  --tl-bg-surface-overlay: #ffffff;

  --tl-text-primary: var(--tl-brand-midnight);
  --tl-text-secondary: var(--tl-neutral-700);
  --tl-text-muted: var(--tl-neutral-600);
  --tl-text-disabled: var(--tl-neutral-400);
  --tl-text-inverse: var(--tl-brand-white);

  --tl-border-subtle: rgba(15, 23, 42, 0.08);
  --tl-border-default: rgba(15, 23, 42, 0.14);
  --tl-border-strong: rgba(15, 23, 42, 0.24);

  --tl-surface-accent: color-mix(in srgb, var(--tl-accent) 8%, white);
  --tl-border-accent: color-mix(in srgb, var(--tl-accent) 34%, transparent);

  --tl-success-surface: rgba(34, 197, 94, 0.08);
  --tl-success-border: rgba(34, 197, 94, 0.26);
  --tl-danger-surface: rgba(239, 68, 68, 0.08);
  --tl-danger-border: rgba(239, 68, 68, 0.26);
  --tl-warning-surface: rgba(245, 158, 11, 0.10);
  --tl-warning-border: rgba(245, 158, 11, 0.28);
  --tl-info-surface: rgba(0, 209, 255, 0.08);
  --tl-info-border: rgba(0, 209, 255, 0.28);
  --tl-ai-surface: rgba(139, 92, 246, 0.08);
  --tl-ai-border: rgba(139, 92, 246, 0.26);

  --tl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --tl-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.07);
  --tl-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.09);
  --tl-shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.12);

  --tl-glow-accent: 0 0 0 1px color-mix(in srgb, var(--tl-accent) 14%, transparent);
}

/* --------------------------------------------------------------------
 * Experience density
 * These are semantic defaults. Components consume them rather than
 * scattering mode-specific dimensions.
 * -------------------------------------------------------------------- */
[data-experience="simple"] {
  --tl-density-card-padding: var(--tl-space-6);
  --tl-density-section-gap: var(--tl-space-8);
  --tl-density-grid-gap: var(--tl-space-5);
  --tl-density-control-height: var(--tl-control-height-lg);
  --tl-density-table-row-height: 3.25rem;
  --tl-density-metric-gap: var(--tl-space-4);
}

[data-experience="advanced"] {
  --tl-density-card-padding: var(--tl-space-4);
  --tl-density-section-gap: var(--tl-space-6);
  --tl-density-grid-gap: var(--tl-space-4);
  --tl-density-control-height: var(--tl-control-height-md);
  --tl-density-table-row-height: 2.75rem;
  --tl-density-metric-gap: var(--tl-space-3);
}

/* --------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tl-duration-instant: 0ms;
    --tl-duration-fast: 0ms;
    --tl-duration-base: 0ms;
    --tl-duration-slow: 0ms;
  }
}