/* Generated by build-tokens.mjs. Edit tokens.json, never this file. */
:root {
  color-scheme: light;
  --bf-ref-font-body: "DM Sans", Arial, sans-serif;
  --bf-ref-font-arabic: "Noto Sans Arabic", Arial, sans-serif;
  --bf-ref-font-code: ui-monospace, SFMono-Regular, Consolas, monospace;
  --bf-ref-text-xs: 0.75rem;
  --bf-ref-text-sm: 0.875rem;
  --bf-ref-text-md: 1rem;
  --bf-ref-text-lg: 1.125rem;
  --bf-ref-text-xl: 1.5rem;
  --bf-ref-text-title: 2rem;
  --bf-ref-text-heading: clamp(2rem, 4vw, 3.5rem);
  --bf-ref-text-display: clamp(3rem, 6vw, 5.5rem);
  --bf-ref-weight-regular: 400;
  --bf-ref-weight-medium: 500;
  --bf-ref-weight-semibold: 600;
  --bf-ref-weight-bold: 700;
  --bf-ref-weight-heavy: 800;
  --bf-ref-weight-display: 900;
  --bf-ref-leading-tight: 1.04;
  --bf-ref-leading-heading: 1.2;
  --bf-ref-leading-body: 1.6;
  --bf-ref-leading-arabic: 1.8;
  --bf-ref-tracking-display: -0.04em;
  --bf-ref-tracking-heading: -0.025em;
  --bf-ref-tracking-body: -0.01em;
  --bf-ref-space-1: 4px;
  --bf-ref-space-2: 8px;
  --bf-ref-space-3: 12px;
  --bf-ref-space-4: 16px;
  --bf-ref-space-5: 20px;
  --bf-ref-space-6: 24px;
  --bf-ref-space-8: 32px;
  --bf-ref-space-10: 40px;
  --bf-ref-space-12: 48px;
  --bf-ref-space-16: 64px;
  --bf-ref-space-20: 80px;
  --bf-ref-space-24: 96px;
  --bf-ref-radius-sm: 8px;
  --bf-ref-radius-control: 16px;
  --bf-ref-radius-card: 24px;
  --bf-ref-radius-panel: 32px;
  --bf-ref-radius-hero: 36px;
  --bf-ref-radius-pill: 999px;
  --bf-ref-size-control: 48px;
  --bf-ref-size-compact: 44px;
  --bf-ref-size-large: 56px;
  --bf-ref-size-icon: 20px;
  --bf-ref-size-content: 1200px;
  --bf-ref-size-reading: 68ch;
  --bf-ref-motion-fast: 120ms;
  --bf-ref-motion-normal: 200ms;
  --bf-ref-motion-slow: 320ms;
  --bf-ref-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bf-ref-layer-base: 0;
  --bf-ref-layer-sticky: 10;
  --bf-ref-layer-popover: 20;
  --bf-ref-layer-overlay: 30;
  --bf-ref-layer-toast: 40;
  --bf-ref-breakpoint-mobile: 640px;
  --bf-ref-breakpoint-tablet: 960px;
  --bf-ref-breakpoint-wide: 1280px;
  --bf-ref-color-green-950: #003f2b;
  --bf-ref-color-green-800: #006b40;
  --bf-ref-color-green-700: #008650;
  --bf-ref-color-green-100: #d9f1e3;
  --bf-ref-color-green-50: #edf5f0;
  --bf-ref-color-lime-400: #d4ff43;
  --bf-ref-color-white: #ffffff;
  --bf-ref-color-ink-950: #101f18;
  --bf-ref-color-ink-900: #172a20;
  --bf-ref-color-ink-800: #22382c;
  --bf-ref-color-ink-700: #34513f;
  --bf-ref-color-neutral-950: #13251c;
  --bf-ref-color-neutral-600: #52655a;
  --bf-ref-color-neutral-500: #7c9084;
  --bf-ref-color-neutral-200: #dfe7e1;
  --bf-ref-color-neutral-50: #f7faf8;
  --bf-ref-color-mint-100: #eff9f1;
  --bf-ref-color-mint-300: #bed0c3;
  --bf-ref-color-mint-500: #8da593;
  --bf-ref-color-action-hover-dark: #e4ff8a;
  --bf-ref-color-status-success-dark: #96e3ac;
  --bf-ref-color-status-success-bg-light: #e5f4eb;
  --bf-ref-color-status-success-bg-dark: #163c2a;
  --bf-ref-color-status-warning-light: #815000;
  --bf-ref-color-status-warning-dark: #ffdb83;
  --bf-ref-color-status-warning-bg-light: #fff2d6;
  --bf-ref-color-status-warning-bg-dark: #3f3018;
  --bf-ref-color-status-danger-light: #b42318;
  --bf-ref-color-status-danger-dark: #ffb2a8;
  --bf-ref-color-status-danger-bg-light: #fff0ed;
  --bf-ref-color-status-danger-bg-dark: #432521;
  --bf-ref-color-status-info-light: #175a85;
  --bf-ref-color-status-info-dark: #a7d7ff;
  --bf-ref-color-status-info-bg-light: #eaf5fd;
  --bf-ref-color-status-info-bg-dark: #16354c;
  --bf-ref-color-overlay-light: #101f1880;
  --bf-ref-color-overlay-dark: #050d0acf;
  --bf-sys-text-primary: var(--bf-ref-color-neutral-950);
  --bf-sys-text-secondary: var(--bf-ref-color-neutral-600);
  --bf-sys-text-inverse: var(--bf-ref-color-white);
  --bf-sys-surface-canvas: var(--bf-ref-color-neutral-50);
  --bf-sys-surface-base: var(--bf-ref-color-white);
  --bf-sys-surface-raised: var(--bf-ref-color-white);
  --bf-sys-surface-subtle: var(--bf-ref-color-green-50);
  --bf-sys-surface-selected: var(--bf-ref-color-green-100);
  --bf-sys-brand-fresh: var(--bf-ref-color-green-700);
  --bf-sys-brand-deep: var(--bf-ref-color-green-950);
  --bf-sys-brand-on-fresh: var(--bf-ref-color-white);
  --bf-sys-brand-accent: var(--bf-ref-color-lime-400);
  --bf-sys-brand-on-accent: var(--bf-ref-color-green-950);
  --bf-sys-action-fill: var(--bf-ref-color-green-800);
  --bf-sys-action-hover: var(--bf-ref-color-green-950);
  --bf-sys-action-text: var(--bf-ref-color-white);
  --bf-sys-focus-ring: var(--bf-ref-color-green-800);
  --bf-sys-border-control: var(--bf-ref-color-neutral-500);
  --bf-sys-border-subtle: var(--bf-ref-color-neutral-200);
  --bf-sys-disabled-fill: var(--bf-ref-color-green-50);
  --bf-sys-disabled-text: var(--bf-ref-color-neutral-600);
  --bf-sys-status-success: var(--bf-ref-color-green-800);
  --bf-sys-status-success-bg: var(--bf-ref-color-status-success-bg-light);
  --bf-sys-status-warning: var(--bf-ref-color-status-warning-light);
  --bf-sys-status-warning-bg: var(--bf-ref-color-status-warning-bg-light);
  --bf-sys-status-danger: var(--bf-ref-color-status-danger-light);
  --bf-sys-status-danger-bg: var(--bf-ref-color-status-danger-bg-light);
  --bf-sys-status-info: var(--bf-ref-color-status-info-light);
  --bf-sys-status-info-bg: var(--bf-ref-color-status-info-bg-light);
  --bf-sys-overlay: var(--bf-ref-color-overlay-light);
  --bf-sys-gradient-brand: linear-gradient(125deg, #003f2b 0%, #008650 100%);
  --bf-sys-gradient-fresh: linear-gradient(115deg, #d4ff43 0%, #94efaf 100%);
  --bf-sys-gradient-glow: radial-gradient(ellipse at top right, #d9f1e3, #f7faf8 70%);
  --bf-sys-gradient-forest: radial-gradient(ellipse at top right, #006b40 0%, #003f2b 55%, #101f18 100%);
  --bf-sys-gradient-citrus: linear-gradient(135deg, #fff07a 0%, #d4ff43 100%);
  --bf-sys-gradient-dew: linear-gradient(160deg, #eff9f1 0%, #94efaf 100%);
  --bf-sys-elevation-raised: 0 6px 20px #003f2b0d;
  --bf-sys-elevation-floating: 0 12px 36px #003f2b1a;
  --bf-sys-elevation-overlay: 0 24px 64px #003f2b2e;
  --bf-sys-nav-surface: #003f2b;
  --bf-sys-nav-text: #ffffff;
  --bf-sys-nav-muted: #c0d8c9;
  --bf-sys-nav-hover: #165840;
  --bf-sys-danger-action-text: #ffffff;
  --bf-comp-button-radius: var(--bf-ref-radius-pill);
  --bf-comp-button-height: var(--bf-ref-size-control);
  --bf-comp-button-bg: var(--bf-sys-action-fill);
  --bf-comp-button-fg: var(--bf-sys-action-text);
  --bf-comp-input-radius: var(--bf-ref-radius-control);
  --bf-comp-input-border: var(--bf-sys-border-control);
  --bf-comp-card-radius: var(--bf-ref-radius-card);
  --bf-comp-panel-radius: var(--bf-ref-radius-panel);
  --bf-comp-dialog-radius: var(--bf-ref-radius-panel);
  --bf-comp-dock-radius: var(--bf-ref-radius-pill);
  --bf-comp-focus-width: 3px;
  --bf-comp-focus-offset: 4px;
  --bf-color-green-950: var(--bf-ref-color-green-950);
  --bf-color-green-800: var(--bf-ref-color-green-800);
  --bf-color-green-700: var(--bf-ref-color-green-700);
  --bf-color-green-100: var(--bf-sys-surface-selected);
  --bf-color-green-50: var(--bf-sys-surface-subtle);
  --bf-color-lime-400: var(--bf-ref-color-lime-400);
  --bf-color-white: var(--bf-ref-color-white);
  --bf-color-ink: var(--bf-sys-text-primary);
  --bf-color-muted: var(--bf-sys-text-secondary);
  --bf-color-border: var(--bf-sys-border-control);
  --bf-color-border-subtle: var(--bf-sys-border-subtle);
  --bf-color-surface: var(--bf-sys-surface-base);
  --bf-color-canvas: var(--bf-sys-surface-canvas);
  --bf-color-brand: var(--bf-sys-brand-fresh);
  --bf-color-brand-strong: var(--bf-sys-brand-deep);
  --bf-color-accent: var(--bf-sys-brand-accent);
  --bf-color-on-brand: var(--bf-sys-brand-on-fresh);
  --bf-color-on-accent: var(--bf-sys-brand-on-accent);
  --bf-color-action: var(--bf-sys-action-fill);
  --bf-color-action-hover: var(--bf-sys-action-hover);
  --bf-color-focus: var(--bf-sys-focus-ring);
  --bf-color-success: var(--bf-sys-status-success);
  --bf-color-success-bg: var(--bf-sys-status-success-bg);
  --bf-color-warning: var(--bf-sys-status-warning);
  --bf-color-warning-bg: var(--bf-sys-status-warning-bg);
  --bf-color-danger: var(--bf-sys-status-danger);
  --bf-color-danger-bg: var(--bf-sys-status-danger-bg);
  --bf-color-info: var(--bf-sys-status-info);
  --bf-color-info-bg: var(--bf-sys-status-info-bg);
  --bf-font-body: var(--bf-ref-font-body);
  --bf-font-arabic: var(--bf-ref-font-arabic);
  --bf-font-code: var(--bf-ref-font-code);
  --bf-text-xs: var(--bf-ref-text-xs);
  --bf-text-sm: var(--bf-ref-text-sm);
  --bf-text-md: var(--bf-ref-text-md);
  --bf-text-lg: var(--bf-ref-text-lg);
  --bf-text-xl: var(--bf-ref-text-xl);
  --bf-text-title: var(--bf-ref-text-title);
  --bf-text-heading: var(--bf-ref-text-heading);
  --bf-text-display: var(--bf-ref-text-display);
  --bf-weight-regular: var(--bf-ref-weight-regular);
  --bf-weight-medium: var(--bf-ref-weight-medium);
  --bf-weight-semibold: var(--bf-ref-weight-semibold);
  --bf-weight-bold: var(--bf-ref-weight-bold);
  --bf-weight-heavy: var(--bf-ref-weight-heavy);
  --bf-weight-display: var(--bf-ref-weight-display);
  --bf-leading-tight: var(--bf-ref-leading-tight);
  --bf-leading-heading: var(--bf-ref-leading-heading);
  --bf-leading-body: var(--bf-ref-leading-body);
  --bf-leading-arabic: var(--bf-ref-leading-arabic);
  --bf-tracking-display: var(--bf-ref-tracking-display);
  --bf-tracking-heading: var(--bf-ref-tracking-heading);
  --bf-tracking-body: var(--bf-ref-tracking-body);
  --bf-space-1: var(--bf-ref-space-1);
  --bf-space-2: var(--bf-ref-space-2);
  --bf-space-3: var(--bf-ref-space-3);
  --bf-space-4: var(--bf-ref-space-4);
  --bf-space-5: var(--bf-ref-space-5);
  --bf-space-6: var(--bf-ref-space-6);
  --bf-space-8: var(--bf-ref-space-8);
  --bf-space-10: var(--bf-ref-space-10);
  --bf-space-12: var(--bf-ref-space-12);
  --bf-space-16: var(--bf-ref-space-16);
  --bf-space-20: var(--bf-ref-space-20);
  --bf-space-24: var(--bf-ref-space-24);
  --bf-radius-sm: var(--bf-ref-radius-sm);
  --bf-radius-control: var(--bf-ref-radius-control);
  --bf-radius-card: var(--bf-ref-radius-card);
  --bf-radius-panel: var(--bf-ref-radius-panel);
  --bf-radius-hero: var(--bf-ref-radius-hero);
  --bf-radius-pill: var(--bf-ref-radius-pill);
  --bf-shadow-raised: var(--bf-sys-elevation-raised);
  --bf-shadow-floating: var(--bf-sys-elevation-floating);
  --bf-shadow-overlay: var(--bf-sys-elevation-overlay);
  --bf-size-control: var(--bf-ref-size-control);
  --bf-size-compact: var(--bf-ref-size-compact);
  --bf-size-large: var(--bf-ref-size-large);
  --bf-size-icon: var(--bf-ref-size-icon);
  --bf-size-content: var(--bf-ref-size-content);
  --bf-size-reading: var(--bf-ref-size-reading);
  --bf-motion-fast: var(--bf-ref-motion-fast);
  --bf-motion-normal: var(--bf-ref-motion-normal);
  --bf-motion-slow: var(--bf-ref-motion-slow);
  --bf-motion-ease: var(--bf-ref-motion-ease);
  --bf-layer-base: var(--bf-ref-layer-base);
  --bf-layer-sticky: var(--bf-ref-layer-sticky);
  --bf-layer-popover: var(--bf-ref-layer-popover);
  --bf-layer-overlay: var(--bf-ref-layer-overlay);
  --bf-layer-toast: var(--bf-ref-layer-toast);
  --bf-breakpoint-mobile: var(--bf-ref-breakpoint-mobile);
  --bf-breakpoint-tablet: var(--bf-ref-breakpoint-tablet);
  --bf-breakpoint-wide: var(--bf-ref-breakpoint-wide);
  --bf-color-on-action: var(--bf-sys-action-text);
  --bf-color-on-inverse: var(--bf-sys-text-inverse);
  --bf-color-surface-raised: var(--bf-sys-surface-raised);
  --bf-color-disabled-bg: var(--bf-sys-disabled-fill);
  --bf-color-disabled-text: var(--bf-sys-disabled-text);
  --bf-color-overlay: var(--bf-sys-overlay);
  --bf-gradient-brand: var(--bf-sys-gradient-brand);
  --bf-gradient-fresh: var(--bf-sys-gradient-fresh);
  --bf-gradient-glow: var(--bf-sys-gradient-glow);
  --bf-gradient-forest: var(--bf-sys-gradient-forest);
  --bf-gradient-citrus: var(--bf-sys-gradient-citrus);
  --bf-gradient-dew: var(--bf-sys-gradient-dew);
  --bf-color-nav-surface: var(--bf-sys-nav-surface);
  --bf-color-nav-text: var(--bf-sys-nav-text);
  --bf-color-nav-muted: var(--bf-sys-nav-muted);
  --bf-color-nav-hover: var(--bf-sys-nav-hover);
  --bf-color-danger-action-text: var(--bf-sys-danger-action-text);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bf-sys-text-primary: var(--bf-ref-color-mint-100);
  --bf-sys-text-secondary: var(--bf-ref-color-mint-300);
  --bf-sys-text-inverse: var(--bf-ref-color-neutral-950);
  --bf-sys-surface-canvas: var(--bf-ref-color-ink-950);
  --bf-sys-surface-base: var(--bf-ref-color-ink-900);
  --bf-sys-surface-raised: var(--bf-ref-color-ink-800);
  --bf-sys-surface-subtle: var(--bf-ref-color-ink-800);
  --bf-sys-surface-selected: var(--bf-ref-color-ink-700);
  --bf-sys-brand-fresh: var(--bf-ref-color-green-700);
  --bf-sys-brand-deep: var(--bf-ref-color-lime-400);
  --bf-sys-brand-on-fresh: var(--bf-ref-color-white);
  --bf-sys-brand-accent: var(--bf-ref-color-lime-400);
  --bf-sys-brand-on-accent: var(--bf-ref-color-green-950);
  --bf-sys-action-fill: var(--bf-ref-color-lime-400);
  --bf-sys-action-hover: var(--bf-ref-color-action-hover-dark);
  --bf-sys-action-text: var(--bf-ref-color-green-950);
  --bf-sys-focus-ring: var(--bf-ref-color-lime-400);
  --bf-sys-border-control: var(--bf-ref-color-mint-500);
  --bf-sys-border-subtle: var(--bf-ref-color-ink-700);
  --bf-sys-disabled-fill: var(--bf-ref-color-ink-800);
  --bf-sys-disabled-text: var(--bf-ref-color-mint-300);
  --bf-sys-status-success: var(--bf-ref-color-status-success-dark);
  --bf-sys-status-success-bg: var(--bf-ref-color-status-success-bg-dark);
  --bf-sys-status-warning: var(--bf-ref-color-status-warning-dark);
  --bf-sys-status-warning-bg: var(--bf-ref-color-status-warning-bg-dark);
  --bf-sys-status-danger: var(--bf-ref-color-status-danger-dark);
  --bf-sys-status-danger-bg: var(--bf-ref-color-status-danger-bg-dark);
  --bf-sys-status-info: var(--bf-ref-color-status-info-dark);
  --bf-sys-status-info-bg: var(--bf-ref-color-status-info-bg-dark);
  --bf-sys-overlay: var(--bf-ref-color-overlay-dark);
  --bf-sys-gradient-brand: linear-gradient(125deg, #003f2b 0%, #008650 100%);
  --bf-sys-gradient-fresh: linear-gradient(115deg, #d4ff43 0%, #94efaf 100%);
  --bf-sys-gradient-glow: radial-gradient(ellipse at top right, #34513f, #101f18 70%);
  --bf-sys-gradient-forest: radial-gradient(ellipse at top right, #006b40 0%, #003f2b 55%, #101f18 100%);
  --bf-sys-gradient-citrus: linear-gradient(135deg, #fff07a 0%, #d4ff43 100%);
  --bf-sys-gradient-dew: linear-gradient(160deg, #eff9f1 0%, #94efaf 100%);
  --bf-sys-elevation-raised: 0 6px 20px #00000030;
  --bf-sys-elevation-floating: 0 12px 36px #00000050;
  --bf-sys-elevation-overlay: 0 24px 64px #00000070;
  --bf-sys-nav-surface: #003f2b;
  --bf-sys-nav-text: #ffffff;
  --bf-sys-nav-muted: #c0d8c9;
  --bf-sys-nav-hover: #165840;
  --bf-sys-danger-action-text: #432521;
}