/**
 * TTDS v1.0 Design Tokens — Layer 1
 * Source: TTDS-v1.0/04_TTDS_Design_Tokens.json
 * Do not add component rules here.
 */
:root {
  /* Color */
  --tt-canvas: #ffffff;
  --tt-canvas-subtle: #fafafb;
  --tt-canvas-muted: #f4f4f6;
  --tt-obsidian: #0c0c0e;
  --tt-obsidian-soft: #18181c;
  --tt-graphite: #3a3a42;
  --tt-slate: #6b6b76;
  --tt-mist: #9898a4;
  --tt-line: #e8e8ec;
  --tt-line-strong: #d4d4dc;
  --tt-signal: #4b49ff;
  --tt-signal-hover: #3d3bee;
  --tt-signal-soft: rgba(75, 73, 255, 0.08);
  --tt-signal-ring: rgba(75, 73, 255, 0.28);
  --tt-pulse: #7c59ff;
  --tt-success: #0f9d58;
  --tt-success-soft: rgba(15, 157, 88, 0.1);
  --tt-warning: #b8860b;
  --tt-warning-soft: rgba(184, 134, 11, 0.1);
  --tt-danger: #d93025;
  --tt-danger-soft: rgba(217, 48, 37, 0.1);
  --tt-info: #2563eb;
  --tt-info-soft: rgba(37, 99, 235, 0.08);
  --tt-glass: rgba(255, 255, 255, 0.72);

  /* Typography families */
  --tt-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --tt-font-ar: "IBM Plex Sans Arabic", "Tajawal", sans-serif;
  --tt-font-mono: ui-monospace, SFMono-Regular, monospace;

  /* Spacing — 8px grid */
  --tt-space-1: 0.25rem;
  --tt-space-2: 0.5rem;
  --tt-space-3: 0.75rem;
  --tt-space-4: 1rem;
  --tt-space-5: 1.25rem;
  --tt-space-6: 1.5rem;
  --tt-space-8: 2rem;
  --tt-space-10: 2.5rem;
  --tt-space-12: 3rem;
  --tt-space-16: 4rem;
  --tt-space-20: 5rem;
  --tt-space-24: 6rem;
  --tt-space-32: 8rem;
  --tt-section-sm: 4rem;
  --tt-section-md: 6rem;
  --tt-section-lg: 8rem;

  /* Radius */
  --tt-radius-sm: 6px;
  --tt-radius-md: 10px;
  --tt-radius-lg: 14px;
  --tt-radius-xl: 20px;
  --tt-radius-2xl: 28px;
  --tt-radius-full: 9999px;

  /* Shadow */
  --tt-shadow-xs: 0 1px 2px rgba(12, 12, 14, 0.04);
  --tt-shadow-sm: 0 4px 20px rgba(12, 12, 14, 0.06);
  --tt-shadow-md: 0 12px 40px rgba(12, 12, 14, 0.08);
  --tt-shadow-lg: 0 24px 64px rgba(12, 12, 14, 0.1);
  --tt-shadow-signal: 0 8px 32px rgba(75, 73, 255, 0.12);

  /* Motion — TTDS §11 */
  --tt-dur-instant: 100ms;
  --tt-dur-fast: 160ms;
  --tt-dur-base: 280ms;
  --tt-dur-slow: 480ms;
  --tt-dur-slower: 640ms;
  --tt-ease: cubic-bezier(0.2, 0, 0, 1);
  --tt-ease-em: cubic-bezier(0.16, 1, 0.3, 1);
  --tt-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --tt-header-h: 72px;
  --tt-header-h-m: 64px;
  --tt-container: 1280px;
  --tt-prose: 680px;
  --tt-touch: 48px;

  /* Z-index */
  --tt-z-sticky-buy: 90;
  --tt-z-header: 100;
  --tt-z-overlay: 200;
  --tt-z-modal: 300;
  --tt-z-toast: 400;

  /* Astra bridge aliases */
  --tt-accent: var(--tt-signal);
  --tt-accent-hover: var(--tt-signal-hover);
  --tt-accent-soft: var(--tt-signal-soft);
  --tt-accent-ring: var(--tt-signal-ring);
}