/* Anbridge Design Tokens — mirrors Figma variables (collections: Primitives, Color, Spacing & Radius)
   Theme: soft neutral grays (v3). Primitive names (navy/slate/blue) are kept for Figma-variable
   compatibility; their values are now true neutrals, "blue" = charcoal accent. */
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{
  /* Primitives */
  --navy-950:#242424;--navy-900:#2A2A2A;--navy-800:#333333;--navy-700:#3D3D3D;--navy-600:#4D4D4D;
  --slate-300:#BDBDBD;--slate-200:#D6D6D6;
  --blue-700:#404040;--blue-600:#2B2B2B;--blue-500:#525252;--blue-400:#D9D9D9;--blue-100:#E6E6E6;--blue-50:#F0F0F0;
  --gray-0:#FFFFFF;--gray-50:#FAFAFA;--gray-100:#F2F2F2;--gray-200:#E2E2E2;--gray-300:#CFCFCF;--gray-400:#707070;--gray-500:#5C5C5C;--gray-700:#3D3D3D;--gray-900:#1F1F1F;
  --red-600:#C2333D;--red-50:#FDEEEE;--green-700:#15703F;--green-50:#E7F4EC;
  /* Semantic colour */
  --color-bg-canvas:var(--gray-0);--color-bg-subtle:var(--gray-50);--color-bg-muted:var(--gray-100);
  --color-bg-inverse:var(--navy-900);--color-bg-inverse-deep:var(--navy-950);--color-bg-inverse-raised:var(--navy-800);--color-bg-accent-subtle:var(--blue-50);
  --color-text-primary:var(--gray-900);--color-text-body:var(--gray-700);--color-text-secondary:var(--gray-500);--color-text-tertiary:var(--gray-400);
  --color-text-inverse:#F5F5F5;--color-text-inverse-muted:var(--slate-300);--color-text-accent:var(--blue-600);--color-text-accent-inverse:var(--blue-400);
  --color-text-on-accent:var(--gray-0);--color-text-error:var(--red-600);--color-text-success:var(--green-700);
  --color-border-default:var(--gray-200);--color-border-strong:var(--gray-300);--color-border-input:#949494;--color-border-inverse:var(--navy-700);--color-border-accent:var(--blue-600);--color-border-error:var(--red-600);--color-border-success:var(--green-700);
  --color-action-primary:var(--blue-600);--color-action-primary-hover:var(--blue-700);--color-action-secondary:var(--gray-0);--color-action-secondary-hover:var(--gray-50);
  --color-action-ghost-hover:var(--blue-50);--color-action-disabled:var(--gray-100);--color-action-inverse-hover:var(--navy-800);
  --color-feedback-error:var(--red-600);--color-feedback-error-subtle:var(--red-50);--color-feedback-success:var(--green-700);--color-feedback-success-subtle:var(--green-50);
  --color-graphic-line:var(--navy-600);--color-graphic-node:var(--blue-500);--color-graphic-node-subtle:var(--slate-200);
  /* Spacing */
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
  /* Radius */
  --radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;
  /* Layout */
  --layout-container-desktop:1200px;--layout-margin-desktop:120px;--layout-margin-tablet:40px;--layout-margin-mobile:20px;--layout-gutter-desktop:24px;--layout-gutter-mobile:16px;
  /* Effects (Figma effect styles) */
  --elevation-subtle:0 1px 2px rgba(0,0,0,.05);
  --elevation-card:0 1px 3px rgba(0,0,0,.06),0 4px 12px -2px rgba(0,0,0,.06);
  --elevation-raised:0 2px 4px -1px rgba(0,0,0,.06),0 16px 32px -8px rgba(0,0,0,.12);
  --focus-ring:0 0 0 2px #fff,0 0 0 4px var(--blue-600);
  --focus-ring-inverse:0 0 0 2px var(--navy-900),0 0 0 4px var(--gray-0);
  --focus-ring-input:0 0 0 3px rgba(43,43,43,.18);
  --focus-ring-error:0 0 0 3px rgba(194,51,61,.2);
  /* Type (Figma text styles) */
  --color-text-on-inverse-action:var(--gray-900);--color-action-inverse:#F5F5F5;--color-action-inverse-strong:var(--gray-0);
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* v4 accent: one calm blue, used sparingly (primary buttons, icons, eyebrows, badges, link hovers).
   #1F6FA8 = 5.4:1 on white, 4.8:1 on --accent-50 · #7CC0EC = 7.3:1 on #2A2A2A (dark surfaces) */
:root{
  --accent-700:#185A8A;--accent-600:#1F6FA8;--accent-300:#7CC0EC;--accent-200:#A9D5F3;--accent-50:#EAF3FA;--accent-100:#D5E7F5;
  --color-accent:var(--accent-600);
  --color-text-accent:var(--accent-600);--color-text-accent-inverse:var(--accent-300);
  --color-border-accent:var(--accent-600);--color-bg-accent-subtle:var(--accent-50);
  --color-action-primary:var(--accent-600);--color-action-primary-hover:var(--accent-700);
  --color-action-inverse:var(--accent-300);--color-action-inverse-strong:var(--accent-200);
  --focus-ring:0 0 0 2px #fff,0 0 0 4px var(--accent-600);
  /* readability: slightly darker body and secondary text */
  --color-text-body:#333333;--color-text-secondary:#4D4D4D;
}
