/* SA Metal design tokens. Variables are global; visual rules remain V2-scoped. */
:root {
  --sa-blue-50: #f4f9ff;
  --sa-blue-100: #e4f0ff;
  --sa-blue-200: #cde1f8;
  --sa-blue-300: #a9c8ea;
  --sa-blue-400: #7fa8d7;
  --sa-blue-500: #578ac2;
  --sa-blue-600: #3e8ec3;
  --sa-blue-700: #02559b;
  --sa-blue-800: #034179;
  --sa-blue-900: #022f59;
  --sa-blue-950: #011b37;

  --sa-sky-50: #f4faff;
  --sa-sky-100: #e5f3ff;
  --sa-sky-200: #cae7fe;
  --sa-sky-300: #a7d3f6;
  --sa-sky-400: #78b7e6;
  --sa-sky-500: #4f9fd8;
  --sa-sky-600: #1787c8;
  --sa-sky-700: #0669a1;
  --sa-sky-800: #03537e;
  --sa-sky-900: #033c5e;
  --sa-sky-950: #012339;

  --sa-neutral-50: #fafafa;
  --sa-neutral-100: #f4f4f4;
  --sa-neutral-200: #e5e5e5;
  --sa-neutral-300: #d4d4d4;
  --sa-neutral-400: #a3a3a3;
  --sa-neutral-500: #808080;
  --sa-neutral-600: #585858;
  --sa-neutral-700: #404040;
  --sa-neutral-800: #262626;
  --sa-neutral-900: #171717;
  --sa-neutral-950: #0a0a0a;

  --sa-green-50: #f0fdf4;
  --sa-green-100: #dcfce7;
  --sa-green-200: #bbf7d0;
  --sa-green-300: #86efac;
  --sa-green-400: #4ade80;
  --sa-green-500: #22c55e;
  --sa-green-600: #16a34a;
  --sa-green-700: #15803d;
  --sa-green-800: #166534;
  --sa-green-900: #14532d;
  --sa-green-950: #052e16;

  --sa-amber-50: #fffbeb;
  --sa-amber-100: #fef3c7;
  --sa-amber-200: #fde68a;
  --sa-amber-300: #fcd34d;
  --sa-amber-400: #fbbf24;
  --sa-amber-500: #f59e0b;
  --sa-amber-600: #d97706;
  --sa-amber-700: #b45309;
  --sa-amber-800: #92400e;
  --sa-amber-900: #78350f;
  --sa-amber-950: #451a03;

  --sa-red-50: #fef2f2;
  --sa-red-100: #fee2e2;
  --sa-red-200: #fecaca;
  --sa-red-300: #fca5a5;
  --sa-red-400: #f87171;
  --sa-red-500: #ef4444;
  --sa-red-600: #dc2626;
  --sa-red-700: #b91c1c;
  --sa-red-800: #991b1b;
  --sa-red-900: #7f1d1d;
  --sa-red-950: #450a0a;

  --sa-white: #ffffff;
  --sa-black: #000000;

  --sa-color-primary: var(--sa-blue-700);
  --sa-color-heading: var(--sa-blue-800);
  --sa-color-action: var(--sa-sky-700);
  --sa-color-accent: var(--sa-sky-600);
  --sa-color-text: var(--sa-neutral-900);
  --sa-color-text-secondary: var(--sa-neutral-600);
  --sa-color-border: var(--sa-neutral-300);
  --sa-color-surface: #ffffff;
  --sa-color-surface-subtle: var(--sa-neutral-50);
  --sa-color-brand-subtle: var(--sa-sky-50);
  --sa-color-success: var(--sa-green-600);
  --sa-color-warning: var(--sa-amber-600);
  --sa-color-error: var(--sa-red-600);
  --sa-color-scrim: rgba(1, 27, 55, 0.72);

  --sa-font-family: "Open Sans", Arial, sans-serif;
  --sa-weight-regular: 400;
  --sa-weight-semibold: 600;
  --sa-weight-bold: 700;

}

body.sa-metal-v2 {
  color: var(--sa-color-text);
  font-family: var(--sa-font-family);
}

body.sa-metal-v2 .sa-type-display-xl {
  font-size: 88px;
  line-height: 104px;
  font-weight: var(--sa-weight-bold);
}

body.sa-metal-v2 .sa-type-display-lg {
  font-size: 52px;
  line-height: 60px;
  letter-spacing: -1.6px;
  font-weight: var(--sa-weight-bold);
}

body.sa-metal-v2 .sa-type-display-md {
  font-size: 52px;
  line-height: 64px;
  font-weight: var(--sa-weight-bold);
}

body.sa-metal-v2 .sa-type-title-lg { font-size: 32px; line-height: 40px; font-weight: var(--sa-weight-bold); }
body.sa-metal-v2 .sa-type-title-md { font-size: 28px; line-height: 36px; font-weight: var(--sa-weight-bold); }
body.sa-metal-v2 .sa-type-title-md-semibold { font-size: 28px; line-height: 36px; font-weight: var(--sa-weight-semibold); }
body.sa-metal-v2 .sa-type-title-sm { font-size: 22px; line-height: 30px; font-weight: var(--sa-weight-bold); }
body.sa-metal-v2 .sa-type-title-xs { font-size: 20px; line-height: 28px; font-weight: var(--sa-weight-bold); }
body.sa-metal-v2 .sa-type-body-lead { font-size: 20px; line-height: 30px; }
body.sa-metal-v2 .sa-type-body-large { font-size: 18px; line-height: 28px; }
body.sa-metal-v2 .sa-type-body-base { font-size: 16px; line-height: 24px; }
body.sa-metal-v2 .sa-type-body-small { font-size: 14px; line-height: 22px; }
body.sa-metal-v2 .sa-type-body-reading { font-size: 16px; line-height: 28px; }
body.sa-metal-v2 .sa-type-label-md { font-size: 14px; line-height: 20px; font-weight: var(--sa-weight-semibold); }
body.sa-metal-v2 .sa-type-label-sm { font-size: 12px; line-height: 18px; font-weight: var(--sa-weight-semibold); }

@media (max-width: 1024px) {
  body.sa-metal-v2 .sa-type-display-xl { font-size: 72px; line-height: 84px; }
  body.sa-metal-v2 .sa-type-display-lg { font-size: 44px; line-height: 52px; }
  body.sa-metal-v2 .sa-type-display-md { font-size: 40px; line-height: 52px; }
  body.sa-metal-v2 .sa-type-title-lg { font-size: 30px; line-height: 40px; }
}

@media (max-width: 767px) {
  body.sa-metal-v2 .sa-type-display-xl { font-size: 64px; line-height: 72px; }
  body.sa-metal-v2 .sa-type-display-lg { font-size: 36px; line-height: 44px; }
  body.sa-metal-v2 .sa-type-display-md { font-size: 32px; line-height: 40px; }
  body.sa-metal-v2 .sa-type-title-lg { font-size: 28px; line-height: 36px; }
  body.sa-metal-v2 .sa-type-title-md,
  body.sa-metal-v2 .sa-type-title-md-semibold { font-size: 24px; line-height: 32px; }
  body.sa-metal-v2 .sa-type-title-sm { font-size: 20px; line-height: 28px; }
  body.sa-metal-v2 .sa-type-title-xs { font-size: 18px; line-height: 26px; }
  body.sa-metal-v2 .sa-type-body-lead { font-size: 18px; line-height: 28px; }
}