:root {
  /* Color tokens */
  --egatepass-color-bg: #f4f6fb;
  --egatepass-color-surface: #ffffff;
  --egatepass-color-border: #d9dee7;
  --egatepass-color-primary: #0054b3;
  --egatepass-color-secondary: #6d8fb3;
  --egatepass-color-success: #17a673;
  --egatepass-color-info: #0f8fe0;
  --egatepass-color-warning: #e6a700;
  --egatepass-color-danger: #d5223b;
  --egatepass-color-text: #1f2a37;
  --egatepass-color-text-muted: #5b6675;

  /* Typography tokens */
  --egatepass-font-family-base: "Century Gothic","CenturyGothic","AppleGothic",Arial,sans-serif;
  --egatepass-font-size-base: 16px;
  --egatepass-font-size-h1: 2rem;
  --egatepass-font-size-h2: 1.75rem;
  --egatepass-font-size-h3: 1.5rem;
  --egatepass-line-height-base: 1.5;
  --egatepass-font-weight-semibold: 600;
  --egatepass-font-weight-normal: 400;

  /* Spacing tokens */
  --egatepass-space-xxs: 4px;
  --egatepass-space-xs: 8px;
  --egatepass-space-sm: 12px;
  --egatepass-space-md: 16px;
  --egatepass-space-lg: 24px;
  --egatepass-space-xl: 32px;

  /* Radius tokens */
  --egatepass-radius-sm: 4px;
  --egatepass-radius-md: 8px;
  --egatepass-radius-lg: 12px;

  /* Focus tokens */
  --egatepass-focus-ring-color: rgba(0, 84, 179, 0.65);
  --egatepass-focus-ring-offset: 3px;
  --egatepass-focus-ring-width: 2px;

  /* Border tokens */
  --egatepass-border-weight: 1px;
  --egatepass-border-color-muted: var(--egatepass-color-border);

  /* Shadow tokens */
  --egatepass-shadow-sm: 0 1px 3px rgba(31, 42, 55, 0.08);
  --egatepass-shadow-md: 0 3px 12px rgba(31, 42, 55, 0.12);

  /* Transition tokens */
  --egatepass-transition-fast: 180ms ease-out;
  --egatepass-transition-base: 280ms ease-out;
}