/**
 * FlightOn design tokens (CSS custom properties).
 * Source of truth: frontend/src/theme/tokens.js
 * Generated file: frontend/dist-tokens/design-tokens.css — regenerate with: cd frontend && npm run export-tokens
 * Copy into this theme when tokens change to keep blog aligned with main site.
 */

/* Colors (light theme) - source: tokens.js colorsLight */
:root {
  --fo-color-background-app: #F7F8FA;
  --fo-color-background-page: #F7F8FA;
  --fo-color-background-surface: #FFFFFF;
  --fo-color-background-hero: #F0F4F8;
  --fo-color-background-header: #F7F8FA;
  --fo-color-text-primary: #1E1E1E;
  --fo-color-text-secondary: #5F6368;
  --fo-color-border-subtle: #E0E3E7;
  --fo-color-border-header: rgba(0, 0, 0, 0.08);
  --fo-color-brand-primary: #4682B4;
  --fo-color-brand-light: #87CEEB;
  --fo-color-brand-dark: #2F5F8F;
  --fo-color-status-success: #4CAF50;
  --fo-color-status-warning: #FF9800;
  --fo-color-status-error: #F44336;
  --fo-color-status-info: #2196F3;
  --fo-color-focus-ring: #4682B4;
}

/* Spacing (base unit 8px) */
:root {
  --fo-spacing-xs: 4px;
  --fo-spacing-sm: 8px;
  --fo-spacing-md: 16px;
  --fo-spacing-lg: 24px;
  --fo-spacing-xl: 32px;
  --fo-spacing-xxl: 64px;
}

/* Typography roles */
:root {
  --fo-font-size-logo: 20px;
  --fo-font-weight-logo: 700;
  --fo-line-height-logo: 1.2;
  --fo-font-size-page-title: 28px;
  --fo-font-weight-page-title: 600;
  --fo-line-height-page-title: 1.2;
  --fo-font-size-section-title: 20px;
  --fo-font-weight-section-title: 600;
  --fo-line-height-section-title: 1.3;
  --fo-font-size-item-title: 16px;
  --fo-font-weight-item-title: 500;
  --fo-line-height-item-title: 1.4;
  --fo-font-size-body: 14px;
  --fo-font-weight-body: 400;
  --fo-line-height-body: 1.5;
  --fo-font-size-meta: 12px;
  --fo-font-weight-meta: 400;
  --fo-line-height-meta: 1.4;
  --fo-font-size-control-label: 13px;
  --fo-font-weight-control-label: 500;
  --fo-line-height-control-label: 1.4;
  --fo-font-size-caption: 11px;
  --fo-font-weight-caption: 400;
  --fo-line-height-caption: 1.3;
}

/* Font family (system stack) */
:root {
  --fo-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Radius */
:root {
  --fo-radius-control: 12px;
  --fo-radius-card: 16px;
  --fo-radius-dialog: 16px;
  --fo-radius-small: 6px;
  --fo-radius-circular: 999px;
}

/* Layout: content gutter, container max-width, header */
:root {
  --fo-layout-content-gutter-xs: 16px;
  --fo-layout-content-gutter-sm: 24px;
  --fo-layout-content-gutter-md: 32px;
  --fo-layout-content-gutter-lg: 32px;
  --fo-layout-content-gutter-xl: 32px;
  --fo-layout-container-max-width-xs: 100%;
  --fo-layout-container-max-width-sm: 560px;
  --fo-layout-container-max-width-md: 860px;
  --fo-layout-container-max-width-lg: 900px;
  --fo-layout-container-max-width-xl: 1000px;
  --fo-layout-header-min-height-xs: 56px;
  --fo-layout-header-min-height-sm: 64px;
}