/* Madatech design tokens — Microsoft Fluent 2 language.
   Ported from the approved design canvas. Keep names stable; components reference these. */

:root {
  /* Neutrals (Fluent light theme) */
  --bg-1: #ffffff;
  --bg-2: #fafafa;
  --bg-3: #f5f5f5;
  --bg-4: #f0f0f0;
  --fg-1: #242424;
  --fg-2: #424242;
  --fg-3: #616161;
  --fg-disabled: #bdbdbd;
  --stroke-1: #d1d1d1;
  --stroke-2: #e0e0e0;

  /* Brand (Fluent communication blue) */
  --brand: #0f6cbd;
  --brand-hover: #115ea3;
  --brand-pressed: #0f548c;
  --brand-strong: #0c3b5e;
  --brand-fg: #ffffff;
  --tint-bg: #ebf3fc;
  --tint-border: #cfe4fa;
  --tint-strong: #dcebfb;

  /* Radius */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 6px;
  --radius-xl: 8px;
  --radius-circular: 9999px;

  /* Elevation */
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

  /* Spacing scale */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 72px;

  /* Type */
  --font-base: "Segoe UI Variable", "Segoe UI", "Noto Sans Armenian", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --content-max: 1216px;
}