/*
 * Synapse interface tokens · DashStack-inspired visual foundation v0.2
 * Founder-selected visual direction, 2026-09-14; exact implementation pending review.
 * Style only: no reference content, sample data, icons or images are imported.
 * The font resources are self-hosted and declared in fonts.css.
 */
:root {
  color-scheme: light;

  /* Typography */
  --font-latin: "Montserrat", "Estedad", "Segoe UI", Arial, sans-serif;
  --font-persian: "Estedad", "Montserrat", Tahoma, Arial, sans-serif;
  --font-ui: var(--font-latin);
  --font-body: var(--font-ui);
  --font-mono: var(--font-latin);
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-display: 42px;
  --line-tight: 1.4;
  --line-base: 1.75;
  --line-relaxed: 2;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Surfaces and text */
  --color-canvas: #f5f6fa;
  --color-surface: #ffffff;
  --color-surface-soft: #f5f6fa;
  --color-surface-hover: #edf2ff;
  --color-table-head: #f1f4f9;
  --color-rail: #ffffff;
  --color-ink: #202224;
  --color-text: #454950;
  --color-muted: #626978;
  --color-border: #e2e5ee;
  --color-border-strong: #c7cddb;
  /* Reference blue is decorative; deepen interactive blue for contrast. */
  --color-brand: #4880ff;
  --color-primary: #3264d8;
  --color-primary-hover: #2854bc;
  --color-on-primary: #ffffff;

  /* Restrained accents and semantic status */
  --color-accent: var(--color-primary);
  --color-accent-soft: #eaf0ff;
  --color-focus: var(--color-primary);
  --color-success: #087563;
  --color-success-soft: #ddf5ee;
  --color-success-border: #b6e6d9;
  --color-warning: #865719;
  --color-warning-soft: #fff2d8;
  --color-warning-border: #f0d8a9;
  --color-danger: #bd394a;
  --color-danger-hover: #a62b3b;
  --color-danger-soft: #ffeaed;
  --color-danger-border: #f4c7ce;
  --color-info: #3568bf;
  --color-info-soft: #eaf1ff;
  --color-info-border: #ccdafa;
  --color-purple: #7351c4;
  --color-purple-soft: #eee8ff;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shape and elevation */
  --radius-sm: 6px;
  --radius-control: 8px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 24px rgb(32 34 36 / 4%);
  --shadow-popover: 0 12px 36px rgb(32 34 36 / 12%);
  --shadow-dialog: 0 20px 80px rgb(32 34 36 / 18%);
  --shadow-focus: 0 0 0 3px rgb(50 100 216 / 18%);

  /* App geometry always remains LTR. Text direction is local to content. */
  --rail-width: 76px;
  --context-width: 244px;
  --navigation-width: calc(var(--rail-width) + var(--context-width));
  --topbar-height: 78px;
  --content-padding: 36px;
  --drawer-width: 610px;
  --motion-fast: 150ms;
  --motion-base: 220ms;

  /* Stable aliases for existing app components and design-page examples. */
  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-hover);
  --accent-soft: var(--color-accent-soft);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --radius: var(--radius-card);
  --shadow: var(--shadow-card);
  --font: var(--font-body);
}