:root{

    --gf-brand: var(--wbgreen-500);
    --gf-brand-hover: var(--wbgreen-600);
    --gf-brand-active: var(--wbgreen-700);

    /* Green brand shades for convenience */
    --gf-brand-100: var(--wbgreen-100);
    --gf-brand-200: var(--wbgreen-200);
    --gf-brand-300: var(--wbgreen-300);
    --gf-brand-400: var(--wbgreen-400);
    --gf-brand-500: var(--wbgreen-500);
    --gf-brand-600: var(--wbgreen-600);
    --gf-brand-700: var(--wbgreen-700);
    --gf-brand-800: var(--wbgreen-800);
    --gf-brand-900: var(--wbgreen-900);
    --gf-brand-950: var(--wbgreen-950);

    /* Radius - Grafana is relatively tight / modern */
    --gf-radius-sm: 4px;
    --gf-radius: 6px;
    --gf-radius-md: 8px;
    --gf-radius-lg: 12px;
    --gf-radius-xl: 16px;
    --gf-radius-pill: 9999px;

    /* Spacing scale (inspired by Grafana + Bootstrap) */
    --gf-space-1: 4px;
    --gf-space-2: 8px;
    --gf-space-3: 12px;
    --gf-space-4: 16px;
    --gf-space-5: 24px;
    --gf-space-6: 32px;
    --gf-space-7: 40px;
    --gf-space-8: 48px;

    /* Typography */
    --gf-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --gf-font-size-xs: 12px;
    --gf-font-size-sm: 14px;
    --gf-font-size-base: 16px;
    --gf-font-size-lg: 18px;
    --gf-font-size-xl: 20px;

    --gf-font-weight-normal: 400;
    --gf-font-weight-medium: 500;
    --gf-font-weight-semibold: 600;
    --gf-font-weight-bold: 700;

    --gf-line-height-tight: 1.25;
    --gf-line-height-normal: 1.5;
    --gf-line-height-relaxed: 1.625;


    --bs-border-color: var(--gf-border-weak);
    --bs-border-radius: var(--gf-radius);
    --bs-border-radius-sm: var(--gf-radius-sm);
    --bs-border-radius-lg: var(--gf-radius-lg);
    --bs-link-color: var(--gf-text-link);
    --bs-link-hover-color: var(--gf-text-link-hover);

    /* Card */
    --bs-card-bg: var(--gf-bg-primary);
    --bs-card-border-color: var(--gf-border-weak);
    --bs-card-border-radius: var(--gf-radius-md);

    /* Green gradients */
    --gf-gradient-brand: linear-gradient(90deg, var(--wbgreen-400) 0%, var(--wbgreen-600) 100%);
    --gf-gradient-brand-vertical: linear-gradient(180deg, var(--wbgreen-400) 0%, var(--wbgreen-600) 100%);
    --gf-gradient-brand-reverse: linear-gradient(270deg, var(--wbgreen-400) 0%, var(--wbgreen-600) 100%);

    /* Surfaces - clean light using WB Grey */
    --gf-bg-canvas: var(--wbgrey-100);
    --gf-bg-primary: #ffffff;
    --gf-bg-secondary: var(--wbgrey-200);
    --gf-bg-elevated: #ffffff;
    --gf-bg-hover: var(--wbgrey-200);

    /* Text using WB Grey */
    --gf-text-primary: var(--wbgrey-950);
    --gf-text-secondary: var(--wbgrey-700);
    --gf-text-muted: var(--wbgrey-500);
    --gf-text-inverse: #ffffff;
    --gf-text-link: var(--wbgreen-600);
    --gf-text-link-hover: var(--wbgreen-700);

    /* Borders from WB Grey */
    --gf-border-weak: var(--wbgrey-300);
    --gf-border-medium: var(--wbgrey-400);
    --gf-border-strong: var(--wbgrey-500);

    /* Action states - green accent for selected/focus */
    --gf-action-hover: rgba(0, 0, 0, 0.045);
    --gf-action-selected: rgba(49, 178, 55, 0.10); /* wbgreen-500 @ 10% */
    --gf-action-focus: rgba(49, 178, 55, 0.22);

    /* Shadows (kept subtle for light) */
    --gf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --gf-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --gf-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --gf-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Form specific */
    --gf-input-bg: #ffffff;
    --gf-input-border: var(--wbgrey-300);
    --gf-input-placeholder: var(--wbgrey-500);
    --gf-input-focus-border: var(--wbgreen-500);
    --gf-input-focus-ring: rgba(49, 178, 55, 0.22);

    /* Semantic colors harmonized with green */
    --gf-success: var(--wbgreen-600);
    --gf-success-bg: var(--wbgreen-100);
    --gf-danger: #d10e5c;
    --gf-danger-bg: #f8d7da;
    --gf-warning: #ff9900;
    --gf-warning-bg: #fff3cd;
    --gf-info: #3d71d9;
    --gf-info-bg: #cff4fc;

    /* Bootstrap mapping */
    --bs-primary: var(--gf-brand);
    --bs-primary-rgb: 49, 178, 55;
    --bs-secondary: var(--wbgrey-600);
    --bs-success: var(--gf-success);
    --bs-info: var(--gf-info);
    --bs-warning: var(--gf-warning);
    --bs-danger: var(--gf-danger);

    --bs-body-color: var(--gf-text-primary);
    --bs-body-bg: var(--gf-bg-canvas);

}