/* Saffron Design System Tokens - Core Variables */
/* This file contains the essential Saffron design tokens for immediate use */
/* Replace this with the official @saffron/core-styles CSS when available */

:root {
  /* Color Tokens - Backgrounds */
  --saf-color-background-default: #ffffff;
  --saf-color-background-subtle: #f7f7f7;
  --saf-color-background-strong: #f2f2f2;
  --saf-color-background-stronger: #e5e5e5;
  --saf-color-background-inverse: #212223;

  /* Color Tokens - Interactive */
  --saf-color-interactive-primary-default: #123021;
  --saf-color-interactive-primary-hover: #edf2f0;
  --saf-color-interactive-primary-active: #1d4b34;
  
  --saf-color-interactive-hero-default: #d64000;
  --saf-color-interactive-hero-hover: #f8eadd;
  --saf-color-interactive-hero-active: #ab3300;
  
  --saf-color-interactive-secondary-default: #ffffff;
  --saf-color-interactive-secondary-hover: #edf2f0;
  --saf-color-interactive-secondary-active: #1d4b34;

  /* Color Tokens - Interactive "On" (text on interactive elements) */
  --saf-color-interactive-on-primary-default: #f7f7f7;
  --saf-color-interactive-on-hero-default: #ffffff;
  --saf-color-interactive-on-secondary-default: #1d4b34;

  /* Color Tokens - Anchors/Links */
  --saf-color-anchor-default: #0062c4;
  --saf-color-anchor-hover: #054688;
  --saf-color-anchor-active: #032f5b;
  --saf-color-anchor-visited: #9647d1;

  /* Color Tokens - Text */
  --saf-color-text-heavy: #212223;
  --saf-color-text-strong: #404040;
  --saf-color-text-subtle: #666666;
  --saf-color-text-knockout: #ffffff;

  /* Color Tokens - Borders */
  --saf-color-border-subtle: #e5e5e5;
  --saf-color-border-strong: #d2d2d2;
  --saf-color-border-stronger: #8a8a8a;

  /* Color Tokens - Status */
  --saf-color-status-success-strong: #387c2b;
  --saf-color-status-success-subtle: #eaffe5;
  --saf-color-status-error-strong: #dc0a0a;
  --saf-color-status-error-subtle: #ffeded;
  --saf-color-status-information-strong: #0062c4;
  --saf-color-status-information-subtle: #edf6ff;
  --saf-color-status-warning-strong: #ab3300;
  --saf-color-status-warning-subtle: #fff8e5;
  --saf-color-status-neutral-strong: #404040;
  --saf-color-status-neutral-subtle: #ededed;

  /* Color Tokens - Focus */
  --saf-color-interactive-focus: #0065ff;

  /* Racing Green Data Visualization Colors */
  --saf-color-data-viz-racing-green-400: #6e8178;
  --saf-color-data-viz-racing-green-500: #4a7c59;

  /* Typography Tokens - Font Families */
  --saf-font-family-source-sans-3: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --saf-font-family-clario: "Clario", "Helvetica Neue", Arial, sans-serif;

  /* Typography Tokens - Font Weights */
  --saf-font-weight-light: 300;
  --saf-font-weight-regular: 400;
  --saf-font-weight-medium: 500;
  --saf-font-weight-semibold: 600;
  --saf-font-weight-bold: 700;
  --saf-font-weight-solid: 900;

  /* Typography Tokens - Font Sizes */
  --saf-font-size-xs: 12px;
  --saf-font-size-sm: 14px;
  --saf-font-size-md: 16px;
  --saf-font-size-lg: 20px;
  --saf-font-size-xl: 24px;
  --saf-font-size-2xl: 28px;
  --saf-font-size-3xl: 32px;
  --saf-font-size-4xl: 40px;
  --saf-font-size-5xl: 56px;

  /* Typography Tokens - Line Heights */
  --saf-line-height-auto: normal;
  --saf-line-height-xs: 110%;
  --saf-line-height-sm: 120%;
  --saf-line-height-md: 135%;
  --saf-line-height-lg: 150%;

  /* Spacing Tokens */
  --saf-spacing-0: 0;
  --saf-spacing-05: 2px;
  --saf-spacing-1: 4px;
  --saf-spacing-2: 8px;
  --saf-spacing-3: 12px;
  --saf-spacing-4: 16px;
  --saf-spacing-5: 20px;
  --saf-spacing-6: 24px;
  --saf-spacing-7: 28px;
  --saf-spacing-8: 32px;
  --saf-spacing-9: 36px;
  --saf-spacing-10: 40px;
  --saf-spacing-11: 44px;
  --saf-spacing-12: 48px;
  --saf-spacing-16: 64px;
  --saf-spacing-20: 80px;
  --saf-spacing-24: 96px;

  /* Border Radius Tokens */
  --saf-border-radius-xs: 4px;
  --saf-border-radius-sm: 8px;
  --saf-border-radius-md: 16px;
  --saf-border-radius-lg: 20px;
  --saf-border-radius-xl: 24px;
  --saf-border-radius-circle: 88px;

  /* Line Width Tokens */
  --saf-line-width-thin: 1px;
  --saf-line-width-thick: 2px;
  --saf-line-width-thicker: 4px;

  /* Drop Shadow Tokens */
  --saf-drop-shadow-level-1: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
  --saf-drop-shadow-level-2: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
  --saf-drop-shadow-level-3: 0 8px 12px 0 rgba(0, 0, 0, 0.16);
  --saf-drop-shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #0065ff;
  --saf-drop-shadow-error: 0 0 0 2px #ffffff, 0 0 0 4px #dc0a0a;

  /* Letter Spacing Tokens */
  --saf-letter-spacing-0: 0;
  --saf-letter-spacing-xs: 0.05em;

  /* Typography System Tokens - Complete Font Declarations */
  --saf-type-heading-default-2xl-strong-standard: var(--saf-font-weight-medium) var(--saf-font-size-2xl)/var(--saf-line-height-sm) var(--saf-font-family-clario);
  --saf-type-heading-default-xl-strong-standard: var(--saf-font-weight-medium) var(--saf-font-size-xl)/var(--saf-line-height-sm) var(--saf-font-family-clario);
  --saf-type-heading-default-lg-strong-standard: var(--saf-font-weight-medium) var(--saf-font-size-lg)/var(--saf-line-height-sm) var(--saf-font-family-clario);
  
  --saf-type-body-default-lg-regular-standard: var(--saf-font-weight-regular) var(--saf-font-size-lg)/var(--saf-line-height-lg) var(--saf-font-family-source-sans-3);
  --saf-type-body-default-md-regular-standard: var(--saf-font-weight-regular) var(--saf-font-size-md)/var(--saf-line-height-lg) var(--saf-font-family-source-sans-3);
  --saf-type-body-default-sm-regular-standard: var(--saf-font-weight-regular) var(--saf-font-size-sm)/var(--saf-line-height-md) var(--saf-font-family-source-sans-3);
  --saf-type-body-default-xs-regular-standard: var(--saf-font-weight-regular) var(--saf-font-size-xs)/var(--saf-line-height-md) var(--saf-font-family-source-sans-3);
  
  --saf-type-body-default-sm-strong-standard: var(--saf-font-weight-semibold) var(--saf-font-size-sm)/var(--saf-line-height-md) var(--saf-font-family-source-sans-3);
  
  --saf-type-label-text-default-md-strong-compact: var(--saf-font-weight-medium) var(--saf-font-size-md)/var(--saf-line-height-md) var(--saf-font-family-clario);
  --saf-type-label-text-default-sm-strong-compact: var(--saf-font-weight-medium) var(--saf-font-size-sm)/var(--saf-line-height-sm) var(--saf-font-family-clario);
}

/* Utility Classes for Quick Implementation */
.saf-text-heading-2xl { font: var(--saf-type-heading-default-2xl-strong-standard); }
.saf-text-heading-xl { font: var(--saf-type-heading-default-xl-strong-standard); }
.saf-text-heading-lg { font: var(--saf-type-heading-default-lg-strong-standard); }

.saf-text-body-lg { font: var(--saf-type-body-default-lg-regular-standard); }
.saf-text-body-md { font: var(--saf-type-body-default-md-regular-standard); }
.saf-text-body-sm { font: var(--saf-type-body-default-sm-regular-standard); }
.saf-text-body-xs { font: var(--saf-type-body-default-xs-regular-standard); }

.saf-text-label-md { font: var(--saf-type-label-text-default-md-strong-compact); }
.saf-text-label-sm { font: var(--saf-type-label-text-default-sm-strong-compact); }

/* Background Utility Classes */
.saf-bg-default { background-color: var(--saf-color-background-default); }
.saf-bg-subtle { background-color: var(--saf-color-background-subtle); }

/* Color Utility Classes */
.saf-text-heavy { color: var(--saf-color-text-heavy); }
.saf-text-strong { color: var(--saf-color-text-strong); }
.saf-text-subtle { color: var(--saf-color-text-subtle); }

/* Interactive Color Classes */
.saf-bg-hero { background-color: var(--saf-color-interactive-hero-default); }
.saf-bg-primary { background-color: var(--saf-color-interactive-primary-default); }
.saf-text-hero { color: var(--saf-color-interactive-hero-default); }
.saf-text-primary { color: var(--saf-color-interactive-primary-default); }
.saf-text-anchor { color: var(--saf-color-anchor-default); }