/* =============================================================
   AFBB Design System — Design Tokens
   Auto-generated from Figma Variables
   Source: AFBB-Design-System (OLmxeWVqmZ3YCV0r6o2wWe)
   DO NOT EDIT MANUALLY — regenerate via Claude + Figma MCP
============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {

  /* ── Primitive Colors ─────────────────────────────────── */
  --primitive-color-white: #ffffff;
  --primitive-color-black: #000000;
  --primitive-color-red-50: #fff0f3;
  --primitive-color-red-100: #ffd9e1;
  --primitive-color-red-200: #ffb3c2;
  --primitive-color-red-300: #ff8097;
  --primitive-color-red-400: #f04a67;
  --primitive-color-red-500: #c90f2f;
  --primitive-color-red-600: #c31030;
  --primitive-color-red-700: #9e0d26;
  --primitive-color-red-800: #79091d;
  --primitive-color-red-900: #520614;
  --primitive-color-navy-50: #f2f7fb;
  --primitive-color-navy-100: #e4edf5;
  --primitive-color-navy-200: #c7d9e8;
  --primitive-color-navy-300: #9db8ce;
  --primitive-color-navy-400: #6f8ea8;
  --primitive-color-navy-500: #4d6883;
  --primitive-color-navy-600: #344d67;
  --primitive-color-navy-700: #24384f;
  --primitive-color-navy-800: #1b2d43;
  --primitive-color-navy-900: #18273b;
  --primitive-color-navy-950: #0c1626;
  --primitive-color-slate-50: #f6f9fb;
  --primitive-color-slate-100: #eef3f7;
  --primitive-color-slate-200: #e8eef4;
  --primitive-color-slate-300: #dae5ed;
  --primitive-color-slate-400: #b8c6d2;
  --primitive-color-slate-500: #8798a8;
  --primitive-color-slate-600: #5f7284;
  --primitive-color-slate-700: #435568;
  --primitive-color-slate-800: #29394b;
  --primitive-color-slate-900: #172539;
  --primitive-color-green-50: #effaf3;
  --primitive-color-green-100: #d8f2e1;
  --primitive-color-green-200: #b5e5c8;
  --primitive-color-green-300: #7fd2a2;
  --primitive-color-green-400: #43b876;
  --primitive-color-green-500: #169e4a;
  --primitive-color-green-600: #0f7f3a;
  --primitive-color-green-700: #0d642f;
  --primitive-color-green-800: #0b4f27;
  --primitive-color-green-900: #083d1f;
  --primitive-color-amber-50: #fff8e6;
  --primitive-color-amber-100: #fdecc0;
  --primitive-color-amber-200: #fad886;
  --primitive-color-amber-300: #f6be4d;
  --primitive-color-amber-400: #f1a51f;
  --primitive-color-amber-500: #d98a08;
  --primitive-color-amber-600: #b36a05;
  --primitive-color-amber-700: #8e5000;
  --primitive-color-amber-800: #6e3c00;
  --primitive-color-amber-900: #502900;
  --primitive-color-blue-50: #eff8ff;
  --primitive-color-blue-100: #d0eafd;
  --primitive-color-blue-200: #b9dffc;
  --primitive-color-blue-300: #74bff6;
  --primitive-color-blue-400: #359fed;
  --primitive-color-blue-500: #0e93d1;
  --primitive-color-blue-600: #0876aa;
  --primitive-color-blue-700: #065a82;
  --primitive-color-blue-800: #054360;
  --primitive-color-blue-900: #032d41;

  /* ── Primitive Spacing ────────────────────────────────── */
  --primitive-spacing-0: 0px;
  --primitive-spacing-0-5: 2px;
  --primitive-spacing-1: 4px;
  --primitive-spacing-1-5: 6px;
  --primitive-spacing-2: 8px;
  --primitive-spacing-2-5: 10px;
  --primitive-spacing-3: 12px;
  --primitive-spacing-3-5: 14px;
  --primitive-spacing-4: 16px;
  --primitive-spacing-5: 20px;
  --primitive-spacing-6: 24px;
  --primitive-spacing-7: 28px;
  --primitive-spacing-8: 32px;
  --primitive-spacing-10: 40px;
  --primitive-spacing-12: 48px;
  --primitive-spacing-16: 64px;
  --primitive-spacing-18: 72px;
  --primitive-spacing-20: 80px;
  --primitive-spacing-24: 96px;
  --primitive-spacing-28: 112px;

  /* ── Primitive Radius ─────────────────────────────────── */
  --primitive-radius-none: 0px;
  --primitive-radius-xs: 4px;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 12px;
  --primitive-radius-lg: 16px;
  --primitive-radius-xl: 20px;
  --primitive-radius-2xl: 24px;
  --primitive-radius-3xl: 32px;
  --primitive-radius-full: 9999px;

  /* ── Primitive Typography ─────────────────────────────── */
  --primitive-font-family-sans: Inter, sans-serif;
  --primitive-font-family-mono: DM Mono, sans-serif;
  --primitive-font-size-2xs: 13px;
  --primitive-font-size-xs: 12px;
  --primitive-font-size-sm: 14px;
  --primitive-font-size-base: 16px;
  --primitive-font-size-lg: 18px;
  --primitive-font-size-xl: 20px;
  --primitive-font-size-2xl: 24px;
  --primitive-font-size-3xl: 32px;
  --primitive-font-size-4xl: 48px;
  --primitive-font-size-5xl: 56px;
  --primitive-font-size-7xl: 72px;
  --primitive-line-height-tight: 16px;
  --primitive-line-height-caption: 16px;
  --primitive-line-height-small: 18px;
  --primitive-line-height-label: 20px;
  --primitive-line-height-sm: 20px;
  --primitive-line-height-body: 22px;
  --primitive-line-height-base: 24px;
  --primitive-line-height-relaxed: 28px;
  --primitive-line-height-heading-xs: 24px;
  --primitive-line-height-heading-sm: 32px;
  --primitive-line-height-heading-md: 40px;
  --primitive-line-height-heading-lg: 56px;
  --primitive-line-height-display-sm: 64px;
  --primitive-line-height-display-lg: 80px;

  /* ── Primitive Icons ──────────────────────────────────── */
  --primitive-icon-size-xs: 12px;
  --primitive-icon-size-sm: 16px;
  --primitive-icon-size-md: 20px;
  --primitive-icon-size-lg: 24px;
  --primitive-icon-size-xl: 32px;
  --primitive-icon-size-2xl: 40px;
  --primitive-icon-stroke-default: 2px;

  /* ── Primitive Borders ────────────────────────────────── */
  --primitive-border-width-0: 0px;
  --primitive-border-width-1: 1px;
  --primitive-border-width-2: 2px;
  --primitive-border-width-4: 4px;

  /* ── Primitive Motion ─────────────────────────────────── */
  --primitive-motion-duration-fast: 150ms;
  --primitive-motion-duration-normal: 250ms;
  --primitive-motion-duration-slow: 400ms;
  --primitive-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --primitive-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --primitive-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --primitive-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ── Primitive Opacity ────────────────────────────────── */
  --primitive-opacity-40: 0.4;
  --primitive-opacity-60: 0.6;
  --primitive-opacity-80: 0.8;

  /* ── Primitive Sizes ──────────────────────────────────── */
  --primitive-size-button-height-sm: 36px;
  --primitive-size-button-height-md: 48px;
  --primitive-size-button-height-lg: 56px;
  --primitive-size-button-height-xl: 52px;
  --primitive-layout-container-max-width: 1280px;

  /* ================================================================
     SEMANTIC TOKENS — use these in components
     These reference primitives and will respect future theming
  ================================================================ */

  /* ── Semantic: Color ─────────────────────────────────────── */
  --color-action-default: var(--primitive-color-navy-900);
  --color-action-hover: var(--primitive-color-navy-800);
  --color-action-active: var(--primitive-color-navy-950);
  --color-action-foreground: var(--primitive-color-white);
  --color-action-subtle: var(--primitive-color-navy-50);
  --color-action-subtle-foreground: var(--primitive-color-navy-900);
  --color-action-selected: var(--primitive-color-navy-100);
  --color-action-disabled: var(--primitive-color-slate-300);
  --color-action-disabled-foreground: var(--primitive-color-slate-500);
  --color-action-destructive: var(--primitive-color-red-700);
  --color-brand-default: var(--primitive-color-red-600);
  --color-brand-hover: var(--primitive-color-red-700);
  --color-brand-foreground: var(--primitive-color-white);
  --color-brand-subtle: var(--primitive-color-red-50);
  --color-brand-border: var(--primitive-color-red-200);
  --color-surface-background: var(--primitive-color-slate-100);
  --color-surface-card: var(--primitive-color-white);
  --color-surface-popover: var(--primitive-color-white);
  --color-surface-secondary: var(--primitive-color-slate-50);
  --color-surface-muted: var(--primitive-color-slate-200);
  --color-surface-subtle: var(--primitive-color-slate-200);
  --color-surface-accent: var(--primitive-color-navy-100);
  --color-surface-elevated: var(--primitive-color-white);
  --color-surface-soft: var(--primitive-color-slate-50);
  --color-surface-inverse: var(--primitive-color-navy-900);
  --color-surface-brand: var(--primitive-color-red-600);
  --color-surface-disabled: var(--primitive-color-slate-100);
  --color-surface-selected: var(--primitive-color-navy-50);
  --color-surface-sunken: var(--primitive-color-slate-100);
  --color-text-default: var(--primitive-color-navy-900);
  --color-text-card: var(--primitive-color-navy-900);
  --color-text-popover: var(--primitive-color-navy-900);
  --color-text-secondary: var(--primitive-color-navy-800);
  --color-text-muted: var(--primitive-color-slate-600);
  --color-text-accent: var(--primitive-color-navy-900);
  --color-text-strong: var(--primitive-color-navy-900);
  --color-text-subtle: var(--primitive-color-slate-500);
  --color-text-inverse: var(--primitive-color-white);
  --color-text-disabled: var(--primitive-color-slate-400);
  --color-text-brand: var(--primitive-color-red-600);
  --color-text-link: var(--primitive-color-red-600);
  --color-text-link-hover: var(--primitive-color-red-700);
  --color-text-placeholder: var(--primitive-color-slate-500);
  --color-border-default: var(--primitive-color-slate-200);
  --color-border-input: var(--primitive-color-slate-300);
  --color-border-ring: var(--primitive-color-red-500);
  --color-border-subtle: var(--primitive-color-slate-100);
  --color-border-strong: var(--primitive-color-slate-400);
  --color-border-focus: var(--primitive-color-blue-500);
  --color-border-brand: var(--primitive-color-red-600);
  --color-border-disabled: var(--primitive-color-slate-200);
  --color-border-inverse: var(--primitive-color-white);
  --color-icon-default: var(--primitive-color-navy-900);
  --color-icon-muted: var(--primitive-color-slate-600);
  --color-icon-subtle: var(--primitive-color-slate-500);
  --color-icon-brand: var(--primitive-color-red-600);
  --color-icon-inverse: var(--primitive-color-white);
  --color-icon-action: var(--primitive-color-white);
  --color-icon-disabled: var(--primitive-color-slate-400);
  --color-icon-strong: var(--primitive-color-navy-950);
  --color-state-destructive-default: var(--primitive-color-red-700);
  --color-state-destructive-hover: var(--primitive-color-red-800);
  --color-state-destructive-foreground: var(--primitive-color-white);
  --color-state-destructive-surface: var(--primitive-color-red-50);
  --color-state-destructive-border: var(--primitive-color-red-200);
  --color-state-success: var(--primitive-color-green-600);
  --color-state-success-default: var(--primitive-color-green-600);
  --color-state-success-hover: var(--primitive-color-green-700);
  --color-state-success-foreground: var(--primitive-color-white);
  --color-state-success-surface: var(--primitive-color-green-50);
  --color-state-success-border: var(--primitive-color-green-200);
  --color-state-warning: var(--primitive-color-amber-500);
  --color-state-warning-default: var(--primitive-color-amber-500);
  --color-state-warning-hover: var(--primitive-color-amber-600);
  --color-state-warning-foreground: var(--primitive-color-navy-900);
  --color-state-warning-surface: var(--primitive-color-amber-50);
  --color-state-warning-border: var(--primitive-color-amber-200);
  --color-state-info: var(--primitive-color-blue-500);
  --color-state-info-default: var(--primitive-color-blue-500);
  --color-state-info-hover: var(--primitive-color-blue-600);
  --color-state-info-foreground: var(--primitive-color-white);
  --color-state-info-surface: var(--primitive-color-blue-50);
  --color-state-info-border: var(--primitive-color-blue-200);
  --color-overlay-scrim: var(--primitive-color-black);

  /* ── Semantic: Spacing ───────────────────────────────────── */
  --spacing-component-2xs: var(--primitive-spacing-1);
  --spacing-component-xs: var(--primitive-spacing-2);
  --spacing-component-sm: var(--primitive-spacing-3);
  --spacing-component-md: var(--primitive-spacing-4);
  --spacing-component-lg: var(--primitive-spacing-6);
  --spacing-component-xl: var(--primitive-spacing-7);
  --spacing-component-2xl: var(--primitive-spacing-8);
  --spacing-section-xs: var(--primitive-spacing-6);
  --spacing-section-sm: var(--primitive-spacing-8);
  --spacing-section-md: var(--primitive-spacing-12);
  --spacing-section-lg: var(--primitive-spacing-16);
  --spacing-section-xl: var(--primitive-spacing-18);
  --spacing-section-2xl: var(--primitive-spacing-28);

  /* ── Semantic: Border Radius ─────────────────────────────── */
  --radius-component-sm: var(--primitive-radius-sm);
  --radius-component-md: var(--primitive-radius-md);
  --radius-component-lg: var(--primitive-radius-lg);
  --radius-component-xl: var(--primitive-radius-2xl);
  --radius-component-2xl: var(--primitive-radius-3xl);
  --radius-component-pill: var(--primitive-radius-full);

  /* ── Semantic: Typography — Font Family ──────────────────── */
  --font-family-body: var(--primitive-font-family-sans);
  --font-family-heading: var(--primitive-font-family-sans);
  --font-family-code: var(--primitive-font-family-mono);

  /* ── Semantic: Typography — Scale ────────────────────────── */
  --typography-h1-font-size: var(--primitive-font-size-4xl);
  --typography-h1-line-height: var(--primitive-line-height-heading-lg);
  --typography-h2-font-size: var(--primitive-font-size-3xl);
  --typography-h2-line-height: var(--primitive-line-height-heading-md);
  --typography-h3-font-size: var(--primitive-font-size-2xl);
  --typography-h3-line-height: var(--primitive-line-height-heading-sm);
  --typography-h4-font-size: var(--primitive-font-size-xl);
  --typography-h4-line-height: var(--primitive-line-height-heading-xs);
  --typography-body-font-size: var(--primitive-font-size-base);
  --typography-body-line-height: var(--primitive-line-height-relaxed);
  --typography-ui-font-size: var(--primitive-font-size-sm);
  --typography-ui-line-height: var(--primitive-line-height-base);
  --typography-label-font-size: var(--primitive-font-size-sm);
  --typography-label-line-height: var(--primitive-line-height-label);
  --typography-caption-font-size: var(--primitive-font-size-xs);
  --typography-caption-line-height: var(--primitive-line-height-caption);
  --typography-display-sm-font-size: var(--primitive-font-size-5xl);
  --typography-display-sm-line-height: var(--primitive-line-height-display-sm);
  --typography-display-lg-font-size: var(--primitive-font-size-7xl);
  --typography-display-lg-line-height: var(--primitive-line-height-display-lg);

  /* ── Semantic: Icons ─────────────────────────────────────── */
  --icon-size-xs: var(--primitive-icon-size-xs);
  --icon-size-sm: var(--primitive-icon-size-sm);
  --icon-size-md: var(--primitive-icon-size-md);
  --icon-size-default: var(--primitive-icon-size-lg);
  --icon-size-lg: var(--primitive-icon-size-lg);
  --icon-size-xl: var(--primitive-icon-size-xl);
  --icon-size-2xl: var(--primitive-icon-size-2xl);
  --icon-stroke-default: var(--primitive-icon-stroke-default);

  /* ── Semantic: Borders ───────────────────────────────────── */
  --border-width-none: var(--primitive-border-width-0);
  --border-width-default: var(--primitive-border-width-1);
  --border-width-input: var(--primitive-border-width-1);
  --border-width-focus: var(--primitive-border-width-2);
  --border-width-selected: var(--primitive-border-width-2);
  --border-width-heavy: var(--primitive-border-width-4);

  /* ── Semantic: Motion ────────────────────────────────────── */
  --motion-duration-fast: var(--primitive-motion-duration-fast);
  --motion-duration-normal: var(--primitive-motion-duration-normal);
  --motion-duration-slow: var(--primitive-motion-duration-slow);
  --motion-easing-emphasized: var(--primitive-motion-easing-emphasized);
  --motion-easing-standard: var(--primitive-motion-easing-standard);
  --motion-easing-decelerate: var(--primitive-motion-easing-decelerate);
  --motion-easing-accelerate: var(--primitive-motion-easing-accelerate);

  /* ── Semantic: Opacity ───────────────────────────────────── */
  --opacity-disabled: var(--primitive-opacity-40);
  --opacity-muted: var(--primitive-opacity-60);
  --opacity-subtle: var(--primitive-opacity-80);
  --opacity-overlay: var(--primitive-opacity-60);

  /* ── Semantic: Sizes ─────────────────────────────────────── */
  --size-button-sm: var(--primitive-size-button-height-sm);
  --size-button-md: var(--primitive-size-button-height-md);
  --size-button-lg: var(--primitive-size-button-height-lg);
  --size-button-xl: var(--primitive-size-button-height-xl);

  /* ── Semantic: Layout ────────────────────────────────────── */
  --layout-container-max-width: var(--primitive-layout-container-max-width);

}