/* ============================================================
   Truth Design Tokens v1.3
   Single Source of Truth for all visual values.
   Never hardcode colors, spacing, or typography in components.
   ============================================================ */

:root {
  /* ---- Color: Background ---- */
  --color-bg-950: #FAFAFA;
  --color-bg-900: #F7F7F5;
  --color-bg-850: #F3F4F6;
  --color-bg-800: #FFFFFF;
  --color-bg-search-stage: #F5F7FA;
  --color-bg-search-transition: #F8F9FB;

  /* ---- Color: Surface (translucent layers) ---- */
  --surface-1: rgba(255,255,255,.48);
  --surface-2: #FFFFFF;
  --surface-3: #F3F4F6;
  --surface-4: #E5E7EB;

  /* ---- Color: Brand ---- */
  --color-brand-primary:   #2563EB;
  --color-brand-hover:     #1D4ED8;
  --color-brand-active:    #1E40AF;
  --color-brand-disabled:  #D6E1F8;

  /* ---- Color: Text ---- */
  --text-primary:    #111827;
  --text-secondary:  #4B5563;
  --text-tertiary:   #6B7280;
  --text-disabled:   #9CA3AF;

  /* ---- Color: Semantic ---- */
  --success:  #3DD9A4;
  --warning:  #F5B942;
  --danger:   #F16666;
  --info:     #4F8CFF;

  /* ---- Typography: Font Family ---- */
  --font-sans:  Inter, "PingFang SC", "HarmonyOS Sans", "Noto Sans SC", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", monospace;

  /* ---- Typography: Font Size ---- */
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 32px;
  --text-display: 48px;

  /* ---- Typography: Font Weight ---- */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ---- Typography: Line Height ---- */
  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---- Space: 8pt Grid ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---- Border ---- */
  --border-default: #E5E7EB;
  --border-hover:   #CBD5E1;
  --border-focus:   var(--color-brand-primary);

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(17,24,39,.04);
  --shadow-md: 0 12px 32px rgba(17,24,39,.07);
  --shadow-lg: 0 28px 70px rgba(17,24,39,.09);

  /* ---- Motion: Duration ---- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-grow:   600ms;
  --duration-ambient: 4000ms;

  /* ---- Motion: Easing ---- */
  --ease-standard:   cubic-bezier(.2,.8,.2,1);
  --ease-emphasized: cubic-bezier(.16,1,.3,1);
  --ease-linear:     linear;

  /* ---- Layout ---- */
  --canvas-max-width: 1440px;
  --content-width:    720px;
  --header-height:    72px;
  --sidebar-width:    320px;

  /* ---- Z-Index ---- */
  --z-base:      0;
  --z-dropdown:  100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     1100;
}