@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* THEME
 *
 * BREAKING CHANGE (June 2026): The following custom properties were renamed
 * to use the --bgl- prefix for consistency. If your project overrides any of
 * these in custom CSS, update the property names:
 *
 *   --border-color        → --bgl-border-color
 *   --placeholder-color   → --bgl-placeholder-color
 *   --label-color         → --bgl-label-color
 *   --input-bg            → --bgl-input-bg
 *   --input-color         → --bgl-input-color
 *   --input-font-size     → --bgl-input-font-size
 *   --input-height        → --bgl-input-height
 *   --input-border-radius → --bgl-input-border-radius
 *   --btn-border-radius   → --bgl-btn-border-radius
 *   --btn-padding         → --bgl-btn-padding
 *   --btn-height          → --bgl-btn-height
 *   --card-border-radius  → --bgl-card-border-radius
 *   --pill-border-radius  → --bgl-pill-border-radius
 *   --pill-height         → --bgl-pill-height
 *   --pill-font-size      → --bgl-pill-font-size
 *   --pill-btn-color      → --bgl-pill-btn-color
 *   --pill-btn-bg         → --bgl-pill-btn-bg
 *   --dropdown-color      → --bgl-dropdown-color
 *   --popper-border-radius→ --bgl-popper-border-radius
 *   --label-font-size     → --bgl-label-font-size
 *   --skeleton-bg         → --bgl-skeleton-bg
 *   --skeleton-pulse      → --bgl-skeleton-pulse
 *   --skeleton-radius     → --bgl-skeleton-radius
 *   --skeleton-margin     → --bgl-skeleton-margin
 */
:root {
    --bgl-primary: var(--bgl-blue);
    --bgl-primary-tint: color-mix(in srgb, var(--bgl-primary) 16%, transparent);
    --bgl-primary-light: #eef6ff;
    --bgl-black: #282929;
    --bgl-black-tint: #28292980;
    --bgl-white: #fff;
    --bgl-gray: #b7b7b7;
    --bgl-gray-light: #f5f8fa;
    --bgl-gray-tint: rgba(183, 183, 183, 0.2);
    --bgl-gray-tint-dark: rgba(183, 183, 183, 0.4);
    --bgl-accent-color: var(--bgl-primary);
    --bgl-bg: #f4f6fa;
    --bgl-shadow: #00000031;
    --bgl-border-color: #00000020;
    --bgl-placeholder-color: #00000040;
    --bgl-label-color: #00000080;
    --bgl-input-bg: #f5f8fa;
    --bgl-input-color: #000000;
    --bgl-dropdown-color: var(--bgl-black);
    --bgl-box-bg: var(--bgl-white);
    --bgl-popup-bg: var(--bgl-white);
    --bgl-popup-text: var(--bgl-black);
    --bgl-popper-border-radius: var(--bgl-card-border-radius);
    --bgl-text-color: var(--bgl-black);
    --bgl-light-text: var(--bgl-white);
    --bgl-richtext-color: var(--bgl-white);
    --bgl-code-bg: var(--bgl-black);
    --bgl-code-color: var(--bgl-white);
    --bgl-dark-bg: rgba(0, 0, 0, 0.7);
    --bgl-selection-bg: var(--bgl-blue-dark);
    --bgl-selection-color: var(--bgl-white);
    --bgl-scrollbar-thumb: var(--bgl-gray);
    --bgl-scrollbar-size: 0.8rem;
    --bgl-pill-btn-color: var(--bgl-white);
    --bgl-pill-btn-bg: var(--bgl-placeholder-color);
    --bgl-selected: var(--bgl-gray-light);
    --bgl-skeleton-bg: #f0f0f0;
    --bgl-skeleton-pulse: var(--bgl-bg);
    --bgl-range-thumb-color: var(--bgl-white);
}

/* TYPE */
:root {
    --bgl-font: 'Lexend', 'Ploni', sans-serif;
    --bgl-input-font-size: 14px;
}

/* DIMENSIONS */
:root {
    --bgl-font-size: 16px;
    --bgl-input-height: 40px;
    --bgl-label-font-size: 12px;
    --bgl-pill-font-size: 12px;
    --bgl-input-border-radius: 7px;
    --bgl-card-border-radius: 12px;
    --bgl-btn-border-radius: 6px;
    --bgl-btn-padding: 30px;
    --bgl-btn-height: 40px;
    --bgl-pill-border-radius: 8px;
    --bgl-pill-height: 20px;
    --bgl-skeleton-radius: 0.25rem;
    --bgl-skeleton-margin: 1rem;
    --bgl-range-thumb-size: 20px;
    --bgl-range-track-height: 8px;
}

/* MISC */
:root {
    --bgl-transition: all 200ms ease;
    --bgl-transition-400: all 400ms ease;
    --bgl-hover-filter: brightness(90%);
    --bgl-active-filter: brightness(70%);
}

/* tooltip */
:root {
    --bgl-tooltip-bg: var(--bgl-black);
    --bgl-tooltip-color: var(--bgl-white);
    --bgl-tooltip-font-size: 13px;
    --bgl-tooltip-padding: 0.5rem 1rem;
    --bgl-tooltip-arrow-color: var(--bgl-black);
}

/* Base Colors */
:root {
    --bgl-blue: #2e5bff;
    --bgl-green: #75c98f;
    --bgl-red: #ed6c6f;
    --bgl-yellow: #ffbb00;
    --bgl-purple: #8a4baf;
    --bgl-brown: #a67c52;
    --bgl-orange: #ff8c00;
    --bgl-turquoise: #00d8c0;
    --bgl-pink: #f1416c;
}

/* OTHER LIGHT COLORS */
:root {
    --bgl-blue-tint: rgba(46, 91, 255, 20%);
    --bgl-blue-dark: #191c30;
    --bgl-blue-light: #eef6ff;
    --bgl-pink-light: #fde8f0;
    --bgl-red-tint: #fbe2e2;
    --bgl-red-light: #fde8e8;
    --bgl-yellow-light: #fff6d5;
    --bgl-green-light: #e8f7f0;
    --bgl-purple-light: #f0e8f7;
    --bgl-brown-light: #f9f4f0;
    --bgl-orange-light: #ffebd9;
    --bgl-turquoise-light: #e8f9f7;
}

/* 10% tints (lightest) */
:root {
    --bgl-blue-10: color-mix(in oklab, white 90%, var(--bgl-blue));
    --bgl-green-10: color-mix(in oklab, white 90%, var(--bgl-green));
    --bgl-red-10: color-mix(in oklab, white 90%, var(--bgl-red));
    --bgl-yellow-10: color-mix(in oklab, white 90%, var(--bgl-yellow));
    --bgl-purple-10: color-mix(in oklab, white 90%, var(--bgl-purple));
    --bgl-brown-10: color-mix(in oklab, white 90%, var(--bgl-brown));
    --bgl-orange-10: color-mix(in oklab, white 90%, var(--bgl-orange));
    --bgl-turquoise-10: color-mix(in oklab, white 90%, var(--bgl-turquoise));
    --bgl-gray-10: color-mix(in oklab, white 90%, var(--bgl-gray));
    --bgl-black-10: color-mix(in oklab, white 90%, var(--bgl-black));
    --bgl-pink-10: color-mix(in oklab, white 90%, var(--bgl-pink));
    --bgl-primary-10: color-mix(in oklab, white 90%, var(--bgl-primary));
}

/* 20% tints */
:root {
    --bgl-blue-20: color-mix(in oklab, white 80%, var(--bgl-blue));
    --bgl-green-20: color-mix(in oklab, white 80%, var(--bgl-green));
    --bgl-red-20: color-mix(in oklab, white 80%, var(--bgl-red));
    --bgl-yellow-20: color-mix(in oklab, white 80%, var(--bgl-yellow));
    --bgl-purple-20: color-mix(in oklab, white 80%, var(--bgl-purple));
    --bgl-brown-20: color-mix(in oklab, white 80%, var(--bgl-brown));
    --bgl-orange-20: color-mix(in oklab, white 80%, var(--bgl-orange));
    --bgl-turquoise-20: color-mix(in oklab, white 80%, var(--bgl-turquoise));
    --bgl-gray-20: color-mix(in oklab, white 80%, var(--bgl-gray));
    --bgl-black-20: color-mix(in oklab, white 80%, var(--bgl-black));
    --bgl-pink-20: color-mix(in oklab, white 80%, var(--bgl-pink));
    --bgl-primary-20: color-mix(in oklab, white 80%, var(--bgl-primary));
}

/* 30% tints */
:root {
    --bgl-blue-30: color-mix(in oklab, white 70%, var(--bgl-blue));
    --bgl-green-30: color-mix(in oklab, white 70%, var(--bgl-green));
    --bgl-red-30: color-mix(in oklab, white 70%, var(--bgl-red));
    --bgl-yellow-30: color-mix(in oklab, white 70%, var(--bgl-yellow));
    --bgl-purple-30: color-mix(in oklab, white 70%, var(--bgl-purple));
    --bgl-brown-30: color-mix(in oklab, white 70%, var(--bgl-brown));
    --bgl-orange-30: color-mix(in oklab, white 70%, var(--bgl-orange));
    --bgl-turquoise-30: color-mix(in oklab, white 70%, var(--bgl-turquoise));
    --bgl-gray-30: color-mix(in oklab, white 70%, var(--bgl-gray));
    --bgl-black-30: color-mix(in oklab, white 70%, var(--bgl-black));
    --bgl-pink-30: color-mix(in oklab, white 70%, var(--bgl-pink));
    --bgl-primary-30: color-mix(in oklab, white 70%, var(--bgl-primary));
}

/* 40% tints */
:root {
    --bgl-blue-40: color-mix(in oklab, white 60%, var(--bgl-blue));
    --bgl-green-40: color-mix(in oklab, white 60%, var(--bgl-green));
    --bgl-red-40: color-mix(in oklab, white 60%, var(--bgl-red));
    --bgl-yellow-40: color-mix(in oklab, white 60%, var(--bgl-yellow));
    --bgl-purple-40: color-mix(in oklab, white 60%, var(--bgl-purple));
    --bgl-brown-40: color-mix(in oklab, white 60%, var(--bgl-brown));
    --bgl-orange-40: color-mix(in oklab, white 60%, var(--bgl-orange));
    --bgl-turquoise-40: color-mix(in oklab, white 60%, var(--bgl-turquoise));
    --bgl-gray-40: color-mix(in oklab, white 60%, var(--bgl-gray));
    --bgl-black-40: color-mix(in oklab, white 60%, var(--bgl-black));
    --bgl-pink-40: color-mix(in oklab, white 60%, var(--bgl-pink));
    --bgl-primary-40: color-mix(in oklab, white 60%, var(--bgl-primary));
}

/* 50% tints */
:root {
    --bgl-blue-50: color-mix(in oklab, white 50%, var(--bgl-blue));
    --bgl-green-50: color-mix(in oklab, white 50%, var(--bgl-green));
    --bgl-red-50: color-mix(in oklab, white 50%, var(--bgl-red));
    --bgl-yellow-50: color-mix(in oklab, white 50%, var(--bgl-yellow));
    --bgl-purple-50: color-mix(in oklab, white 50%, var(--bgl-purple));
    --bgl-brown-50: color-mix(in oklab, white 50%, var(--bgl-brown));
    --bgl-orange-50: color-mix(in oklab, white 50%, var(--bgl-orange));
    --bgl-turquoise-50: color-mix(in oklab, white 50%, var(--bgl-turquoise));
    --bgl-gray-50: color-mix(in oklab, white 50%, var(--bgl-gray));
    --bgl-black-50: color-mix(in oklab, white 50%, var(--bgl-black));
    --bgl-pink-50: color-mix(in oklab, white 50%, var(--bgl-pink));
    --bgl-primary-50: color-mix(in oklab, white 50%, var(--bgl-primary));
}

/* 60% tints */
:root {
    --bgl-blue-60: color-mix(in oklab, white 40%, var(--bgl-blue));
    --bgl-green-60: color-mix(in oklab, white 40%, var(--bgl-green));
    --bgl-red-60: color-mix(in oklab, white 40%, var(--bgl-red));
    --bgl-yellow-60: color-mix(in oklab, white 40%, var(--bgl-yellow));
    --bgl-purple-60: color-mix(in oklab, white 40%, var(--bgl-purple));
    --bgl-brown-60: color-mix(in oklab, white 40%, var(--bgl-brown));
    --bgl-orange-60: color-mix(in oklab, white 40%, var(--bgl-orange));
    --bgl-turquoise-60: color-mix(in oklab, white 40%, var(--bgl-turquoise));
    --bgl-gray-60: color-mix(in oklab, white 40%, var(--bgl-gray));
    --bgl-black-60: color-mix(in oklab, white 40%, var(--bgl-black));
    --bgl-pink-60: color-mix(in oklab, white 40%, var(--bgl-pink));
    --bgl-primary-60: color-mix(in oklab, white 40%, var(--bgl-primary));
}

/* 70% tints */
:root {
    --bgl-blue-70: color-mix(in oklab, white 30%, var(--bgl-blue));
    --bgl-green-70: color-mix(in oklab, white 30%, var(--bgl-green));
    --bgl-red-70: color-mix(in oklab, white 30%, var(--bgl-red));
    --bgl-yellow-70: color-mix(in oklab, white 30%, var(--bgl-yellow));
    --bgl-purple-70: color-mix(in oklab, white 30%, var(--bgl-purple));
    --bgl-brown-70: color-mix(in oklab, white 30%, var(--bgl-brown));
    --bgl-orange-70: color-mix(in oklab, white 30%, var(--bgl-orange));
    --bgl-turquoise-70: color-mix(in oklab, white 30%, var(--bgl-turquoise));
    --bgl-gray-70: color-mix(in oklab, white 30%, var(--bgl-gray));
    --bgl-black-70: color-mix(in oklab, white 30%, var(--bgl-black));
    --bgl-pink-70: color-mix(in oklab, white 30%, var(--bgl-pink));
    --bgl-primary-70: color-mix(in oklab, white 30%, var(--bgl-primary));
}

/* 80% tints */
:root {
    --bgl-blue-80: color-mix(in oklab, white 20%, var(--bgl-blue));
    --bgl-green-80: color-mix(in oklab, white 20%, var(--bgl-green));
    --bgl-red-80: color-mix(in oklab, white 20%, var(--bgl-red));
    --bgl-yellow-80: color-mix(in oklab, white 20%, var(--bgl-yellow));
    --bgl-purple-80: color-mix(in oklab, white 20%, var(--bgl-purple));
    --bgl-brown-80: color-mix(in oklab, white 20%, var(--bgl-brown));
    --bgl-orange-80: color-mix(in oklab, white 20%, var(--bgl-orange));
    --bgl-turquoise-80: color-mix(in oklab, white 20%, var(--bgl-turquoise));
    --bgl-gray-80: color-mix(in oklab, white 20%, var(--bgl-gray));
    --bgl-black-80: color-mix(in oklab, white 20%, var(--bgl-black));
    --bgl-pink-80: color-mix(in oklab, white 20%, var(--bgl-pink));
    --bgl-primary-80: color-mix(in oklab, white 20%, var(--bgl-primary));
}

/* 90% tints */
:root {
    --bgl-blue-90: color-mix(in oklab, white 10%, var(--bgl-blue));
    --bgl-green-90: color-mix(in oklab, white 10%, var(--bgl-green));
    --bgl-red-90: color-mix(in oklab, white 10%, var(--bgl-red));
    --bgl-yellow-90: color-mix(in oklab, white 10%, var(--bgl-yellow));
    --bgl-purple-90: color-mix(in oklab, white 10%, var(--bgl-purple));
    --bgl-brown-90: color-mix(in oklab, white 10%, var(--bgl-brown));
    --bgl-orange-90: color-mix(in oklab, white 10%, var(--bgl-orange));
    --bgl-turquoise-90: color-mix(in oklab, white 10%, var(--bgl-turquoise));
    --bgl-gray-90: color-mix(in oklab, white 10%, var(--bgl-gray));
    --bgl-black-90: color-mix(in oklab, white 10%, var(--bgl-black));
    --bgl-pink-90: color-mix(in oklab, white 10%, var(--bgl-pink));
    --bgl-primary-90: color-mix(in oklab, white 10%, var(--bgl-primary));
}

/* Base Colors */
:root {
    --bgl-blue-100: var(--bgl-blue);
    --bgl-green-100: var(--bgl-green);
    --bgl-red-100: var(--bgl-red);
    --bgl-yellow-100: var(--bgl-yellow);
    --bgl-purple-100: var(--bgl-purple);
    --bgl-brown-100: var(--bgl-brown);
    --bgl-orange-100: var(--bgl-orange);
    --bgl-turquoise-100: var(--bgl-turquoise);
    --bgl-gray-100: var(--bgl-gray);
    --bgl-black-100: var(--bgl-black);
    --bgl-pink-100: var(--bgl-pink);
    --bgl-primary-100: var(--bgl-primary);
}

/* 110% shades (darker than base) */
:root {
    --bgl-blue-110: color-mix(in oklab, black 10%, var(--bgl-blue));
    --bgl-green-110: color-mix(in oklab, black 10%, var(--bgl-green));
    --bgl-red-110: color-mix(in oklab, black 10%, var(--bgl-red));
    --bgl-yellow-110: color-mix(in oklab, black 10%, var(--bgl-yellow));
    --bgl-purple-110: color-mix(in oklab, black 10%, var(--bgl-purple));
    --bgl-brown-110: color-mix(in oklab, black 10%, var(--bgl-brown));
    --bgl-orange-110: color-mix(in oklab, black 10%, var(--bgl-orange));
    --bgl-turquoise-110: color-mix(in oklab, black 10%, var(--bgl-turquoise));
    --bgl-gray-110: color-mix(in oklab, black 10%, var(--bgl-gray));
    --bgl-black-110: color-mix(in oklab, black 10%, var(--bgl-black));
    --bgl-pink-110: color-mix(in oklab, black 10%, var(--bgl-pink));
    --bgl-primary-110: color-mix(in oklab, black 10%, var(--bgl-primary));

}

/* 120% shades */
:root {
    --bgl-blue-120: color-mix(in oklab, black 20%, var(--bgl-blue));
    --bgl-green-120: color-mix(in oklab, black 20%, var(--bgl-green));
    --bgl-red-120: color-mix(in oklab, black 20%, var(--bgl-red));
    --bgl-yellow-120: color-mix(in oklab, black 20%, var(--bgl-yellow));
    --bgl-purple-120: color-mix(in oklab, black 20%, var(--bgl-purple));
    --bgl-brown-120: color-mix(in oklab, black 20%, var(--bgl-brown));
    --bgl-orange-120: color-mix(in oklab, black 20%, var(--bgl-orange));
    --bgl-turquoise-120: color-mix(in oklab, black 20%, var(--bgl-turquoise));
    --bgl-gray-120: color-mix(in oklab, black 20%, var(--bgl-gray));
    --bgl-black-120: color-mix(in oklab, black 20%, var(--bgl-black));
    --bgl-pink-120: color-mix(in oklab, black 20%, var(--bgl-pink));
    --bgl-primary-120: color-mix(in oklab, black 20%, var(--bgl-primary));
}

/* 130% shades (darkest) */
:root {
    --bgl-blue-130: color-mix(in oklab, black 30%, var(--bgl-blue));
    --bgl-green-130: color-mix(in oklab, black 30%, var(--bgl-green));
    --bgl-red-130: color-mix(in oklab, black 30%, var(--bgl-red));
    --bgl-yellow-130: color-mix(in oklab, black 30%, var(--bgl-yellow));
    --bgl-purple-130: color-mix(in oklab, black 30%, var(--bgl-purple));
    --bgl-brown-130: color-mix(in oklab, black 30%, var(--bgl-brown));
    --bgl-orange-130: color-mix(in oklab, black 30%, var(--bgl-orange));
    --bgl-turquoise-130: color-mix(in oklab, black 30%, var(--bgl-turquoise));
    --bgl-gray-130: color-mix(in oklab, black 30%, var(--bgl-gray));
    --bgl-black-130: color-mix(in oklab, black 30%, var(--bgl-black));
    --bgl-pink-130: color-mix(in oklab, black 30%, var(--bgl-pink));
    --bgl-primary-130: color-mix(in oklab, black 30%, var(--bgl-primary));
}

.testMe * {
    outline: 1px dotted red;
}

::selection {
    color: var(--bgl-selection-color);
    background: var(--bgl-selection-bg);
}

/* App-level layout rules moved to app-layout.css (June 2026) */

/* New role colors: secondary / tertiary / quaternary */
/* New role colors — sensible blue-family defaults, override per project */
:root {
    --bgl-secondary: #00d8c0;   /* turquoise-leaning accent */
    --bgl-tertiary: #8a4baf;    /* purple-leaning accent */
    --bgl-quaternary: #0091ff;  /* sky-blue accent */
}

:root {
    --bgl-secondary-light: color-mix(in oklab, white 92%, var(--bgl-secondary));
    --bgl-tertiary-light: color-mix(in oklab, white 92%, var(--bgl-tertiary));
    --bgl-quaternary-light: color-mix(in oklab, white 92%, var(--bgl-quaternary));
    --bgl-secondary-tint: color-mix(in srgb, var(--bgl-secondary) 20%, transparent);
    --bgl-tertiary-tint: color-mix(in srgb, var(--bgl-tertiary) 20%, transparent);
    --bgl-quaternary-tint: color-mix(in srgb, var(--bgl-quaternary) 20%, transparent);
}

:root {
    --bgl-secondary-10: color-mix(in oklab, white 90%, var(--bgl-secondary));
    --bgl-tertiary-10: color-mix(in oklab, white 90%, var(--bgl-tertiary));
    --bgl-quaternary-10: color-mix(in oklab, white 90%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-20: color-mix(in oklab, white 80%, var(--bgl-secondary));
    --bgl-tertiary-20: color-mix(in oklab, white 80%, var(--bgl-tertiary));
    --bgl-quaternary-20: color-mix(in oklab, white 80%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-30: color-mix(in oklab, white 70%, var(--bgl-secondary));
    --bgl-tertiary-30: color-mix(in oklab, white 70%, var(--bgl-tertiary));
    --bgl-quaternary-30: color-mix(in oklab, white 70%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-40: color-mix(in oklab, white 60%, var(--bgl-secondary));
    --bgl-tertiary-40: color-mix(in oklab, white 60%, var(--bgl-tertiary));
    --bgl-quaternary-40: color-mix(in oklab, white 60%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-50: color-mix(in oklab, white 50%, var(--bgl-secondary));
    --bgl-tertiary-50: color-mix(in oklab, white 50%, var(--bgl-tertiary));
    --bgl-quaternary-50: color-mix(in oklab, white 50%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-60: color-mix(in oklab, white 40%, var(--bgl-secondary));
    --bgl-tertiary-60: color-mix(in oklab, white 40%, var(--bgl-tertiary));
    --bgl-quaternary-60: color-mix(in oklab, white 40%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-70: color-mix(in oklab, white 30%, var(--bgl-secondary));
    --bgl-tertiary-70: color-mix(in oklab, white 30%, var(--bgl-tertiary));
    --bgl-quaternary-70: color-mix(in oklab, white 30%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-80: color-mix(in oklab, white 20%, var(--bgl-secondary));
    --bgl-tertiary-80: color-mix(in oklab, white 20%, var(--bgl-tertiary));
    --bgl-quaternary-80: color-mix(in oklab, white 20%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-90: color-mix(in oklab, white 10%, var(--bgl-secondary));
    --bgl-tertiary-90: color-mix(in oklab, white 10%, var(--bgl-tertiary));
    --bgl-quaternary-90: color-mix(in oklab, white 10%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-100: var(--bgl-secondary);
    --bgl-tertiary-100: var(--bgl-tertiary);
    --bgl-quaternary-100: var(--bgl-quaternary);
}
:root {
    --bgl-secondary-110: color-mix(in oklab, black 10%, var(--bgl-secondary));
    --bgl-tertiary-110: color-mix(in oklab, black 10%, var(--bgl-tertiary));
    --bgl-quaternary-110: color-mix(in oklab, black 10%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-120: color-mix(in oklab, black 20%, var(--bgl-secondary));
    --bgl-tertiary-120: color-mix(in oklab, black 20%, var(--bgl-tertiary));
    --bgl-quaternary-120: color-mix(in oklab, black 20%, var(--bgl-quaternary));
}
:root {
    --bgl-secondary-130: color-mix(in oklab, black 30%, var(--bgl-secondary));
    --bgl-tertiary-130: color-mix(in oklab, black 30%, var(--bgl-tertiary));
    --bgl-quaternary-130: color-mix(in oklab, black 30%, var(--bgl-quaternary));
}