/* Impact System Marketing — design tokens
   Source of truth: "ISM Brand Standards" (Brand Standards v2.0, August 2026).
   Do not hard-code hex values in components; consume the semantic names. */

:root {
  /* Crimson ramp */
  --ism-crimson-100: #FFE9E7;
  --ism-crimson-300: #F9A3A0;
  --ism-crimson-500: #BC2534; /* brand red */
  --ism-crimson-700: #800015;
  --ism-crimson-900: #440006;

  /* Charcoal ramp */
  --ism-charcoal-100: #F6F2F2;
  --ism-charcoal-300: #D8D5D4;
  --ism-charcoal-500: #959191;
  --ism-charcoal-700: #424242; /* brand charcoal */
  --ism-charcoal-900: #222020;

  /* Semantic */
  --ism-bg: #FFFFFF;
  --ism-surface: var(--ism-charcoal-100);
  --ism-border: var(--ism-charcoal-300);
  --ism-text: #201E1D;
  --ism-text-muted: var(--ism-charcoal-500);

  --ism-action: var(--ism-crimson-500);
  --ism-action-hover: var(--ism-crimson-700);
  --ism-action-pressed: var(--ism-crimson-900);
  --ism-success: #257C3A;
  --ism-warning: #CB7F00;
  --ism-error: var(--ism-crimson-500);

  /* Type */
  --ism-font-display: 'Archivo', Helvetica, Arial, sans-serif;
  --ism-font-body: 'Archivo', Helvetica, Arial, sans-serif;
  --ism-font-condensed: 'Barlow Condensed', 'Archivo', sans-serif;
  --ism-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Geometry */
  --ism-radius: 0;
  --ism-rule: 2px;
  --ism-rule-light: 1px;

  /* Spacing (4px base) */
  --ism-space-1: 4px;
  --ism-space-2: 8px;
  --ism-space-3: 12px;
  --ism-space-4: 16px;
  --ism-space-6: 24px;   /* grid gutter */
  --ism-space-8: 32px;
  --ism-space-12: 48px;
  --ism-space-14: 56px;  /* page side padding, desktop */
  --ism-space-18: 72px;  /* section padding, desktop */
  --ism-space-24: 96px;

  /* Layout */
  --ism-container: 1280px;
  --ism-columns: 12;
}

/* Type scale — px / rem / line-height / tracking / weight */
.ism-display-xxl { font: italic 900 4.5rem/0.88 var(--ism-font-display); letter-spacing: -0.035em; text-transform: uppercase; }
.ism-display-xl  { font: italic 900 3.5rem/0.90 var(--ism-font-display); letter-spacing: -0.03em;  text-transform: uppercase; }
.ism-display-l   { font: italic 800 2.5rem/0.95 var(--ism-font-display); letter-spacing: -0.02em;  text-transform: uppercase; }
.ism-heading     { font: 800 1.75rem/1.05 var(--ism-font-display); letter-spacing: -0.02em; }
.ism-subhead     { font: 700 1.25rem/1.25 var(--ism-font-display); letter-spacing: -0.01em; }
.ism-label       { font: 500 0.75rem/1.2 var(--ism-font-body); letter-spacing: 0.26em; text-transform: uppercase; }
.ism-body-l      { font: 400 1.125rem/1.55 var(--ism-font-body); }
.ism-body        { font: 400 1rem/1.6 var(--ism-font-body); }
.ism-caption     { font: 400 0.8125rem/1.45 var(--ism-font-body); letter-spacing: 0.01em; }

/* Interaction states — never leave browser defaults */
.ism-btn { background: var(--ism-action); color: #fff; border: 0; border-radius: 0;
  padding: 17px 20px; font: 600 0.8125rem/1 var(--ism-font-body);
  letter-spacing: 0.1em; text-transform: uppercase; text-align: left; cursor: pointer; }
.ism-btn:hover  { background: var(--ism-action-hover); }
.ism-btn:active { background: var(--ism-action-pressed); }
:focus-visible  { outline: 2px solid var(--ism-action); outline-offset: 2px; }
::selection     { background: var(--ism-crimson-100); }