@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700&family=Barlow+Semi+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* tokens/fonts.css */
/* Arrow Sales — Fonts
   Display/UI: Barlow Semi Condensed + Barlow — an industrial grotesque echoing the
   heavy, forward-leaning brand wordmark. Mono: IBM Plex Mono for part numbers & specs.
   SUBSTITUTION: the wordmark itself is a custom heavy italic; Barlow is the closest
   freely-available match. Swap in the real brand webfont if licensed. */

/* tokens/colors.css */
/* Arrow Sales — Color tokens
   Derived from the brand wordmark: Arrow Blue #176BFF, Arrow Red #FF2727, ink black.
   Cool industrial neutrals. Base ramps first, then semantic aliases. */
:root {
  /* ---- Brand: Arrow Blue (primary) ---- */
  --blue-50:  #EAF1FF;
  --blue-100: #D6E4FF;
  --blue-200: #A9C6FF;
  --blue-300: #6F9DFF;
  --blue-400: #3E81FF;
  --blue-500: #176BFF; /* brand base */
  --blue-600: #0E55D6;
  --blue-700: #0B43A8;
  --blue-800: #0A357F;
  --blue-900: #08285F;

  /* ---- Brand: Arrow Red (accent / urgent) ---- */
  --red-50:  #FFECEC;
  --red-100: #FFD6D6;
  --red-200: #FFB0B0;
  --red-300: #FF8A8A;
  --red-400: #FF5A5A;
  --red-500: #FF2727; /* brand base */
  --red-600: #E00B0B;
  --red-700: #B30808;
  --red-800: #8A0606;

  /* ---- Neutrals (cool grey) ---- */
  --white:    #FFFFFF;
  --grey-50:  #F6F7F9;
  --grey-100: #ECEEF2;
  --grey-200: #DCE0E7;
  --grey-300: #C2C8D2;
  --grey-400: #9AA2B1;
  --grey-500: #6B7280;
  --grey-600: #4B5360;
  --grey-700: #343A44;
  --grey-800: #1F242C;
  --grey-900: #0E1116;
  --ink:      #0A0A0A;

  /* ---- Status ---- */
  --green-500: #1E9E5A;
  --green-50:  #E7F6EE;
  --amber-500: #F5A300;
  --amber-50:  #FFF5E0;

  /* ===== Semantic aliases ===== */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-active:     var(--blue-700);
  --brand-soft:       var(--blue-50);
  --accent:           var(--red-500);
  --accent-hover:     var(--red-600);
  --accent-soft:      var(--red-50);

  --text-strong:      var(--ink);
  --text-body:        var(--grey-800);
  --text-muted:       var(--grey-500);
  --text-on-brand:    var(--white);
  --text-link:        var(--blue-600);

  --surface-page:     var(--white);
  --surface-subtle:   var(--grey-50);
  --surface-card:     var(--white);
  --surface-inverse:  var(--grey-900);
  --surface-brand:    var(--blue-500);

  --border-subtle:    var(--grey-200);
  --border-default:   var(--grey-300);
  --border-strong:    var(--grey-400);
  --focus-ring:       var(--blue-400);

  --success:          var(--green-500);
  --success-soft:     var(--green-50);
  --warning:          var(--amber-500);
  --warning-soft:     var(--amber-50);
  --danger:           var(--red-600);
  --danger-soft:      var(--red-50);
}

/* tokens/typography.css */
/* Arrow Sales — Typography tokens */
:root {
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-extra:   800; /* @kind other */

  /* Type scale (display uses Barlow Semi Condensed; body uses Barlow) */
  --fs-display: 64px; --lh-display: 0.98; /* @kind other */ --ls-display: -0.01em; /* @kind other */
  --fs-h1: 44px; --lh-h1: 1.02; /* @kind other */ --ls-h1: -0.005em; /* @kind other */
  --fs-h2: 32px; --lh-h2: 1.08; /* @kind other */
  --fs-h3: 24px; --lh-h3: 1.15; /* @kind other */
  --fs-h4: 19px; --lh-h4: 1.2; /* @kind other */
  --fs-lead: 19px; --lh-lead: 1.5; /* @kind other */
  --fs-body: 16px; --lh-body: 1.6; /* @kind other */
  --fs-sm: 14px; --lh-sm: 1.5; /* @kind other */
  --fs-xs: 12px; --lh-xs: 1.4; /* @kind other */
  --fs-eyebrow: 13px; --ls-eyebrow: 0.14em; /* @kind other */ /* uppercase label */
}

/* tokens/spacing.css */
/* Arrow Sales — Spacing scale (4px base) */
:root {
  --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;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --section-y: 88px;
}

/* tokens/radius.css */
/* Arrow Sales — Radius & border tokens.
   Industrial, squared-off brand. Radii are tight; nothing pill-soft except controls. */
:root {
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;
}

/* tokens/shadows.css */
/* Arrow Sales — Elevation / shadow tokens.
   Restrained, cool-grey shadows. No colored glows. */
:root {
  --shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 17, 22, 0.10), 0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-md: 0 4px 12px rgba(14, 17, 22, 0.10);
  --shadow-lg: 0 12px 28px rgba(14, 17, 22, 0.14);
  --shadow-xl: 0 24px 56px rgba(14, 17, 22, 0.18);

  /* Brand-tinted lift for primary CTAs only */
  --shadow-brand: 0 6px 18px rgba(23, 107, 255, 0.32);

  --ring-focus: 0 0 0 3px rgba(62, 129, 255, 0.40);
}

/* styles.css */
/* Arrow Sales Design System — global entry point.
   Consumers link THIS file. Import lines only. */