/**
 * TN Pro — design tokens (Stitch / Material palette)
 */
:root {
  /* Color */
  --tn-color-primary: #0050cb;
  --tn-color-primary-container: #0066ff;
  --tn-color-on-primary: #ffffff;
  --tn-color-secondary: #425ca0;
  --tn-color-on-secondary: #ffffff;
  --tn-color-tertiary: #a33200;
  --tn-color-on-tertiary: #ffffff;

  --tn-color-surface: #faf8ff;
  --tn-color-surface-low: #f2f3ff;
  --tn-color-surface-high: #e6e7f4;
  --tn-color-surface-container: #ecedfa;
  --tn-color-surface-variant: #e1e2ee;
  --tn-color-on-surface: #191b24;
  --tn-color-on-surface-variant: #424656;

  --tn-color-outline: #727687;
  --tn-color-outline-variant: #c2c6d8;

  --tn-color-error: #ba1a1a;
  --tn-color-error-on: #ffffff;
  --tn-color-error-container: #ffdad6;
  --tn-color-success: #0b6e4f;
  --tn-color-warning: #b05e00;

  /* Typography */
  --tn-font-headline: "Manrope", system-ui, sans-serif;
  --tn-font-body: "Be Vietnam Pro", system-ui, sans-serif;

  --tn-text-xs: 0.75rem;
  --tn-text-sm: 0.8125rem;
  --tn-text-base: 0.9375rem;
  --tn-text-lg: 1.0625rem;
  --tn-text-xl: 1.25rem;
  --tn-text-2xl: 1.5rem;
  --tn-text-3xl: 1.875rem;

  --tn-leading-tight: 1.2;
  --tn-leading-normal: 1.45;
  --tn-leading-relaxed: 1.55;

  /* Spacing (4px grid) */
  --tn-space-0: 0;
  --tn-space-1: 0.25rem;
  --tn-space-2: 0.5rem;
  --tn-space-3: 0.75rem;
  --tn-space-4: 1rem;
  --tn-space-5: 1.25rem;
  --tn-space-6: 1.5rem;
  --tn-space-8: 2rem;
  --tn-space-10: 2.5rem;
  --tn-space-12: 3rem;

  /* Radius: surface=card/panel (rounded-2xl), control=input+toolbar (rounded-xl), nested=thumb/chip (rounded-lg) */
  --tn-radius-sm: 0.25rem;
  --tn-radius-md: 0.5rem;
  --tn-radius-lg: 0.75rem;
  --tn-radius-xl: 1rem;
  --tn-radius-full: 9999px;
  --tn-radius-surface: var(--tn-radius-xl);
  --tn-radius-control: var(--tn-radius-lg);
  --tn-radius-nested: var(--tn-radius-md);

  /* Shadow */
  --tn-shadow-sm: 0 1px 2px rgba(25, 27, 36, 0.06);
  --tn-shadow-md: 0 8px 24px rgba(25, 27, 36, 0.06);
  --tn-shadow-lg: 0 16px 40px rgba(25, 27, 36, 0.1);

  /* Icon */
  --tn-icon-sm: 1.25rem;
  --tn-icon-md: 1.5rem;
  --tn-icon-lg: 1.75rem;

  /* Z */
  --tn-z-sticky: 100;
  --tn-z-drawer: 300;
  --tn-z-modal: 400;
  --tn-z-toast: 500;

  /* Breakpoints (for reference in JS) */
  --tn-bp-md: 768px;
  --tn-bp-lg: 1024px;

  /* Motion */
  --tn-duration-fast: 150ms;
  --tn-duration-normal: 200ms;
  --tn-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --tn-sidebar-width: 18rem;
  --tn-mobile-tab-height: 4rem;
  --tn-header-height: 3.5rem;
}

.tn-root.dark {
  --tn-color-surface: #121318;
  --tn-color-surface-low: #1a1c24;
  --tn-color-surface-container: #22242e;
  --tn-color-on-surface: #eff0fd;
  --tn-color-on-surface-variant: #c2c6d8;
  --tn-color-outline-variant: #424656;
}