/**
 * Athena IT Group brand tokens. Generated from tokens/ by Style Dictionary. Do not edit by hand.
 */

:root {
  --ath-base-color-blue-50: #e1edf5; /** Find tint; also body text on the blue band */
  --ath-base-color-blue-100: #d3e3ee; /** Eyebrow text on the blue band */
  --ath-base-color-blue-600: #25668f; /** Brand blue. The band, the wordmark tile */
  --ath-base-color-blue-800: #173f5f; /** Navy. Headings, the wordmark, the dark panel */
  --ath-base-color-orange-50: #fbe4d8; /** Fix tint */
  --ath-base-color-orange-200: #ffb98f; /** Emphasized word on the blue band (large text only) */
  --ath-base-color-orange-400: #e8692f; /** Highlight. Dark text only on top of it */
  --ath-base-color-orange-500: #c24a1e; /** Button orange */
  --ath-base-color-orange-600: #b5441b; /** Text links and Fix headings */
  --ath-base-color-orange-700: #9c3a16; /** Button hover */
  --ath-base-color-green-50: #dfefe6; /** Run tint */
  --ath-base-color-green-600: #276b4f; /** Run heading; success */
  --ath-base-color-slate-0: #ffffff; /** Surfaces */
  --ath-base-color-slate-50: #f2f4f6; /** Page ground */
  --ath-base-color-slate-100: #d9e0e7; /** Dividers and card borders */
  --ath-base-color-slate-400: #808c99; /** Input borders (3:1 on ground and white) */
  --ath-base-color-slate-600: #56687a; /** Meta text */
  --ath-base-color-slate-700: #44566a; /** Muted text */
  --ath-base-color-slate-900: #1b232b; /** Ink */
  --ath-base-color-red-600: #b42318; /** Errors and destructive actions */
  --ath-base-space-1: 4px;
  --ath-base-space-2: 8px;
  --ath-base-space-3: 12px;
  --ath-base-space-4: 16px;
  --ath-base-space-5: 20px;
  --ath-base-space-6: 24px;
  --ath-base-space-8: 32px;
  --ath-base-space-10: 40px;
  --ath-base-space-14: 56px;
  --ath-base-space-20: 80px;
  --ath-base-radius-sm: 8px; /** Icon tiles, small chips */
  --ath-base-radius-md: 14px; /** Tool cards and modules */
  --ath-base-radius-lg: 20px; /** Marketing cards and panels */
  --ath-base-radius-xl: 28px; /** Photos, the dark CTA panel */
  --ath-base-radius-pill: 999px; /** Every button and input */
  --ath-base-font-family-display: 'Schibsted Grotesk', Arial, sans-serif;
  --ath-base-font-family-body: Figtree, Arial, sans-serif;
  --ath-base-font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ath-base-font-weight-regular: 400;
  --ath-base-font-weight-semibold: 600;
  --ath-base-font-weight-bold: 700;
  --ath-base-font-weight-heavy: 800; /** Display headings (page title, section, subsection). Schibsted Grotesk only */
  --ath-base-font-tracking-display: -0.02em;
  --ath-base-font-tracking-label: 0.06em;
  --ath-shadow-photo: 0px 20px 40px 0px rgba(27,35,43,0.14);
  --ath-shadow-float: 0px 8px 24px 0px rgba(27,35,43,0.10);
  --ath-layout-content-max: 1000px;
  --ath-type-page-title-font-size: 46px; /** 34px under 760px */
  --ath-type-page-title-line-height: 1.1; /** 34px under 760px */
  --ath-type-section-font-size: 30px;
  --ath-type-section-line-height: 1.2;
  --ath-type-subsection-font-size: 22px;
  --ath-type-subsection-line-height: 1.25;
  --ath-type-subsection-letter-spacing: -0.01em;
  --ath-type-card-title-font-size: 18px;
  --ath-type-card-title-line-height: 1.3;
  --ath-type-card-title-letter-spacing: -0.01em;
  --ath-type-lead-font-size: 17px;
  --ath-type-lead-line-height: 1.65;
  --ath-type-lead-letter-spacing: 0;
  --ath-type-body-font-size: 16px;
  --ath-type-body-line-height: 1.6;
  --ath-type-body-letter-spacing: 0;
  --ath-type-small-font-size: 14px;
  --ath-type-small-line-height: 1.55;
  --ath-type-small-letter-spacing: 0;
  --ath-type-caption-font-size: 13px;
  --ath-type-caption-line-height: 1.5;
  --ath-type-caption-letter-spacing: 0;
  --ath-type-eyebrow-font-size: 12px; /** Uppercase. Always directly above a heading */
  --ath-type-eyebrow-line-height: 1.4; /** Uppercase. Always directly above a heading */
  --ath-color-bg-ground: var(--ath-base-color-slate-50); /** Page background. Never cream */
  --ath-color-bg-surface: var(--ath-base-color-slate-0); /** Cards, modules, list containers */
  --ath-color-bg-brand: var(--ath-base-color-blue-600); /** The blue band. One per screen */
  --ath-color-bg-brand-deep: var(--ath-base-color-blue-800); /** Dark CTA panel, study mode, download panel */
  --ath-color-text-primary: var(--ath-base-color-slate-900); /** Body text */
  --ath-color-text-heading: var(--ath-base-color-blue-800); /** h2/h3 and titles on light backgrounds */
  --ath-color-text-muted: var(--ath-base-color-slate-700); /** Secondary body, descriptions, row details */
  --ath-color-text-meta: var(--ath-base-color-slate-600); /** Eyebrows, captions, dates, meta lines */
  --ath-color-text-link: var(--ath-base-color-orange-600); /** Inline text links (underlined) */
  --ath-color-text-link-hover: var(--ath-base-color-orange-700);
  --ath-color-on-brand-heading: var(--ath-base-color-slate-0); /** Headline on the band or dark panel */
  --ath-color-on-brand-body: var(--ath-base-color-blue-50); /** Body text on the band (5.2:1) */
  --ath-color-on-brand-eyebrow: var(--ath-base-color-blue-100);
  --ath-color-on-brand-emphasis: var(--ath-base-color-orange-200); /** One emphasized word in a band headline. Large text only (3.7:1) */
  --ath-color-border-default: var(--ath-base-color-slate-100); /** Dividers, card hairlines, rules */
  --ath-color-border-input: var(--ath-base-color-slate-400); /** Input and form-control outlines */
  --ath-color-border-focus: var(--ath-base-color-orange-500); /** Keyboard focus ring on light grounds */
  --ath-color-border-focus-on-brand: var(--ath-base-color-slate-0); /** Keyboard focus ring on the band and the dark panel (orange fails there, 1.3:1) */
  --ath-color-action-primary-bg: var(--ath-base-color-orange-500);
  --ath-color-action-primary-bg-hover: var(--ath-base-color-orange-700); /** Hover only, never a resting state */
  --ath-color-action-primary-text: var(--ath-base-color-slate-0); /** 4.9:1 on button orange */
  --ath-color-action-secondary-bg: var(--ath-base-color-slate-0);
  --ath-color-action-secondary-text: var(--ath-base-color-blue-800);
  --ath-color-action-secondary-border: var(--ath-base-color-slate-100);
  --ath-color-highlight-bg: var(--ath-base-color-orange-400); /** Progress, target lines, due pills */
  --ath-color-highlight-text: var(--ath-base-color-slate-900); /** Always dark text on highlight. White fails (2.6:1) */
  --ath-color-pillar-find-tint: var(--ath-base-color-blue-50); /** Find: assessments. Card and The Numbers callout background */
  --ath-color-pillar-find-heading: var(--ath-base-color-blue-600); /** Find headings, eyebrows and icon tiles. Blue means finding the hours, nothing else */
  --ath-color-pillar-find-body: var(--ath-base-color-slate-900);
  --ath-color-pillar-fix-tint: var(--ath-base-color-orange-50); /** Fix: fixed-price menu items and projects. Card and Watch Out callout background */
  --ath-color-pillar-fix-heading: var(--ath-base-color-orange-600); /** Fix headings, eyebrows and icon tiles */
  --ath-color-pillar-fix-body: var(--ath-base-color-slate-900);
  --ath-color-pillar-run-tint: var(--ath-base-color-green-50); /** Run: fractional IT and ongoing support. Card and Do This callout background */
  --ath-color-pillar-run-heading: var(--ath-base-color-green-600); /** Run headings, eyebrows and icon tiles */
  --ath-color-pillar-run-body: var(--ath-base-color-slate-900);
  --ath-color-status-success: var(--ath-base-color-green-600);
  --ath-color-status-warning: var(--ath-base-color-orange-400);
  --ath-color-status-danger: var(--ath-base-color-red-600);
  --ath-color-logo-wordmark: var(--ath-base-color-blue-800); /** "Athena" in the wordmark on light grounds */
  --ath-color-logo-tile: var(--ath-base-color-blue-600); /** The IT tile in the wordmark and the app icon */
  --ath-color-logo-tile-text: var(--ath-base-color-slate-0); /** IT on the tile (6.2:1) */
  --ath-radius-tile: var(--ath-base-radius-sm);
  --ath-radius-module: var(--ath-base-radius-md);
  --ath-radius-card: var(--ath-base-radius-lg);
  --ath-radius-panel: var(--ath-base-radius-xl);
  --ath-radius-pill: var(--ath-base-radius-pill);
  --ath-layout-gutter: var(--ath-base-space-10); /** 28px under 900px, 18px under 480px */
  --ath-layout-section-gap: var(--ath-base-space-20);
  --ath-font-display: var(--ath-base-font-family-display);
  --ath-font-body: var(--ath-base-font-family-body);
  --ath-font-mono: var(--ath-base-font-family-mono);
  --ath-type-page-title-font-family: var(--ath-base-font-family-display); /** 34px under 760px */
  --ath-type-page-title-font-weight: var(--ath-base-font-weight-heavy); /** 34px under 760px */
  --ath-type-page-title-letter-spacing: var(--ath-base-font-tracking-display); /** 34px under 760px */
  --ath-type-section-font-family: var(--ath-base-font-family-display);
  --ath-type-section-font-weight: var(--ath-base-font-weight-heavy);
  --ath-type-section-letter-spacing: var(--ath-base-font-tracking-display);
  --ath-type-subsection-font-family: var(--ath-base-font-family-display);
  --ath-type-subsection-font-weight: var(--ath-base-font-weight-heavy);
  --ath-type-card-title-font-family: var(--ath-base-font-family-display);
  --ath-type-card-title-font-weight: var(--ath-base-font-weight-bold);
  --ath-type-lead-font-family: var(--ath-base-font-family-body);
  --ath-type-lead-font-weight: var(--ath-base-font-weight-regular);
  --ath-type-body-font-family: var(--ath-base-font-family-body);
  --ath-type-body-font-weight: var(--ath-base-font-weight-regular);
  --ath-type-small-font-family: var(--ath-base-font-family-body);
  --ath-type-small-font-weight: var(--ath-base-font-weight-regular);
  --ath-type-caption-font-family: var(--ath-base-font-family-body);
  --ath-type-caption-font-weight: var(--ath-base-font-weight-regular);
  --ath-type-eyebrow-font-family: var(--ath-base-font-family-body); /** Uppercase. Always directly above a heading */
  --ath-type-eyebrow-font-weight: var(--ath-base-font-weight-bold); /** Uppercase. Always directly above a heading */
  --ath-type-eyebrow-letter-spacing: var(--ath-base-font-tracking-label); /** Uppercase. Always directly above a heading */
}