/*
 * Synapse interface tokens · proposed design v0.1
 * Neutral product palette; not an assertion of approved ADG brand colors.
 * 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: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-soft: #f3f4f5;
  --color-surface-hover: #f5f6f7;
  --color-rail: #fbfbfc;
  --color-ink: #25272b;
  --color-text: #45484f;
  --color-muted: #686e77;
  --color-border: #e7e8ec;
  --color-border-strong: #d3d6dc;
  --color-primary: #24262a;
  --color-primary-hover: #080a0d;
  --color-on-primary: #ffffff;

  /* Restrained accents and semantic status */
  --color-accent: #516c91;
  --color-accent-soft: #edf2f8;
  --color-focus: #597ab6;
  --color-success: #237451;
  --color-success-soft: #eaf5ed;
  --color-success-border: #cce6d5;
  --color-warning: #865d20;
  --color-warning-soft: #faf2e1;
  --color-warning-border: #eadbbe;
  --color-danger: #b83f4b;
  --color-danger-hover: #9a2d39;
  --color-danger-soft: #fbeced;
  --color-danger-border: #eed0d3;
  --color-info: #47698e;
  --color-info-soft: #edf3f8;
  --color-info-border: #d8e3ef;

  /* 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: 9px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 4px rgb(30 35 45 / 2%);
  --shadow-popover: 0 12px 36px rgb(30 35 45 / 10%);
  --shadow-dialog: 0 20px 80px rgb(22 27 35 / 18%);
  --shadow-focus: 0 0 0 3px rgb(89 122 182 / 16%);

  /* 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-surface-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);
}