:root {
  /* Raw palette references */
  --wf-ref-bg-dark: #0B1220;
  --wf-ref-bg-light: #F8FAFC;
  --wf-ref-ink-dark: #FFFFFF;
  --wf-ref-ink-light: #0B1220;

  --wf-ref-accent-mint: #34D399;
  --wf-ref-accent-emerald: #047857;
  --wf-ref-accent-emerald-dark: #10B981;
  --wf-ref-accent-teal: #0D9488;
  --wf-ref-accent-indigo: #4F46E5;
  --wf-ref-accent-amber: #F59E0B;
  --wf-ref-accent-rose: #E11D48;

  --wf-ref-line-light: #E5E7EB;
  --wf-ref-line-dark: #1F2937;

  /* Semantic colors */
  --wf-color-background-canvas: #F8FAFC;
  --wf-color-background-surface: #FFFFFF;
  --wf-color-background-surface-subtle: #F1F5F9;
  --wf-color-background-inverse: #0B1220;

  --wf-color-text-primary: #0B1220;
  --wf-color-text-secondary: #334155;
  --wf-color-text-muted: #475569;
  --wf-color-text-inverse: #FFFFFF;

  --wf-color-border-default: #E5E7EB;
  --wf-color-border-strong: #CBD5E1;

  --wf-color-action-primary-bg: #047857;
  --wf-color-action-primary-text: #FFFFFF;
  --wf-color-action-primary-border: #047857;

  --wf-color-action-secondary-bg: #ECFDF5;
  --wf-color-action-secondary-text: #065F46;
  --wf-color-action-secondary-border: #A7F3D0;

  --wf-color-action-ghost-text: #4F46E5;

  --wf-color-action-destructive-bg: #E11D48;
  --wf-color-action-destructive-text: #FFFFFF;

  --wf-color-status-success-bg: #ECFDF5;
  --wf-color-status-success-text: #065F46;
  --wf-color-status-success-border: #A7F3D0;

  --wf-color-status-warning-bg: #FFFBEB;
  --wf-color-status-warning-text: #92400E;
  --wf-color-status-warning-border: #FCD34D;

  --wf-color-status-error-bg: #FFF1F2;
  --wf-color-status-error-text: #9F1239;
  --wf-color-status-error-border: #FDA4AF;

  --wf-color-status-info-bg: #EEF2FF;
  --wf-color-status-info-text: #3730A3;
  --wf-color-status-info-border: #C7D2FE;

  --wf-color-focus-ring: #4F46E5;
  --wf-color-overlay-scrim: rgba(11, 18, 32, 0.56);

  /* Typography */
  --wf-font-heading: DM Sans, system-ui, sans-serif;
  --wf-font-body: Inter, system-ui, sans-serif;
  --wf-font-mono: IBM Plex Mono, ui-monospace, SFMono-Regular, monospace;

  --wf-font-display-lg-size: 48px;
  --wf-font-display-lg-line-height: 56px;
  --wf-font-display-lg-weight: 700;

  --wf-font-display-md-size: 40px;
  --wf-font-display-md-line-height: 48px;
  --wf-font-display-md-weight: 700;

  --wf-font-heading-xl-size: 36px;
  --wf-font-heading-xl-line-height: 44px;
  --wf-font-heading-xl-weight: 700;

  --wf-font-heading-lg-size: 28px;
  --wf-font-heading-lg-line-height: 34px;
  --wf-font-heading-lg-weight: 700;

  --wf-font-heading-md-size: 24px;
  --wf-font-heading-md-line-height: 30px;
  --wf-font-heading-md-weight: 700;

  --wf-font-heading-sm-size: 20px;
  --wf-font-heading-sm-line-height: 28px;
  --wf-font-heading-sm-weight: 600;

  --wf-font-body-lg-size: 18px;
  --wf-font-body-lg-line-height: 28px;
  --wf-font-body-lg-weight: 400;

  --wf-font-body-md-size: 16px;
  --wf-font-body-md-line-height: 24px;
  --wf-font-body-md-weight: 400;

  --wf-font-body-sm-size: 14px;
  --wf-font-body-sm-line-height: 20px;
  --wf-font-body-sm-weight: 400;

  --wf-font-label-md-size: 14px;
  --wf-font-label-md-line-height: 20px;
  --wf-font-label-md-weight: 500;

  --wf-font-label-sm-size: 12px;
  --wf-font-label-sm-line-height: 16px;
  --wf-font-label-sm-weight: 500;

  --wf-font-mono-sm-size: 12px;
  --wf-font-mono-sm-line-height: 16px;
  --wf-font-mono-sm-weight: 400;

  --wf-font-mono-md-size: 14px;
  --wf-font-mono-md-line-height: 20px;
  --wf-font-mono-md-weight: 400;

  /* Spacing */
  --wf-space-0: 0px;
  --wf-space-2: 2px;
  --wf-space-4: 4px;
  --wf-space-6: 6px;
  --wf-space-8: 8px;
  --wf-space-12: 12px;
  --wf-space-16: 16px;
  --wf-space-20: 20px;
  --wf-space-24: 24px;
  --wf-space-32: 32px;
  --wf-space-40: 40px;
  --wf-space-48: 48px;
  --wf-space-64: 64px;

  /* Radius */
  --wf-radius-none: 0px;
  --wf-radius-sm: 8px;
  --wf-radius-md: 12px;
  --wf-radius-lg: 16px;
  --wf-radius-xl: 20px;
  --wf-radius-pill: 9999px;

  /* Shadows */
  --wf-shadow-none: none;
  --wf-shadow-soft: 0 6px 18px rgba(0,0,0,0.08);
  --wf-shadow-md: 0 10px 24px rgba(0,0,0,0.10);
  --wf-shadow-overlay: 0 16px 40px rgba(0,0,0,0.16);

  /* Border widths */
  --wf-border-width-default: 1px;
  --wf-border-width-strong: 2px;

  /* Controls */
  --wf-control-height-sm: 30px;
  --wf-control-height-md: 36px;
  --wf-control-height-lg: 44px;
  --wf-control-height-xl: 48px;

  --wf-control-padding-x-sm: 12px;
  --wf-control-padding-x-md: 16px;
  --wf-control-padding-x-lg: 20px;

  --wf-control-icon-sm: 16px;
  --wf-control-icon-md: 18px;
  --wf-control-icon-lg: 20px;
}