// ================================================================
// Design tokens — ported from the reference design system
// (tokens/index.json → CSS custom properties), re-prefixed rbfb
// and re-branded: primary is Brevo green.
// Tints are precomputed rgba() instead of hsl(from …) for reach.
// ================================================================

// Default (light) theme. Scoped to our mount so nothing leaks
// into the rest of wp-admin.
#rbfb-admin,
.rbfb-top-level-wrapper {
    // Core + derived (hover 80% / secondary 18% / light 11% / extralight 5%).
    --rbfb-primary: #0b996e;
    --rbfb-primary-hover: rgba(11, 153, 110, 0.8);
    --rbfb-secondary: rgba(11, 153, 110, 0.18);
    --rbfb-primary-light: rgba(11, 153, 110, 0.11);
    --rbfb-primary-extralight: rgba(11, 153, 110, 0.05);
    --rbfb-success: #00ac47;
    --rbfb-success-100: #00ac4733;
    --rbfb-success-50: #00ac471a;
    --rbfb-skyblue: #00afff;
    --rbfb-skyblue-50: #00afff0d;
    --rbfb-skyblue-100: #00afff26;
    --rbfb-purple: #8900ff;
    --rbfb-purple-50: #8300ff0d;
    --rbfb-purple-100: #8300ff26;
    --rbfb-pink: #ff00ff;
    --rbfb-pink-50: #ff00ff0d;
    --rbfb-pink-100: #ff00ff26;
    --rbfb-warning: #ff5900;
    --rbfb-warning-100: #ff590033;
    --rbfb-warning-50: #ff59001a;
    --rbfb-error: #ff0000;
    --rbfb-error-100: #ff000033;
    --rbfb-error-50: #ff00001a;
    --rbfb-info: #838383;
    --rbfb-info-100: #d9d9d9;
    --rbfb-info-50: #f2f2f2;
    --rbfb-badge-pro: #ffc300;
    --rbfb-badge-new: #e3eeff;
    --rbfb-white: #ffffff;
    --rbfb-black: #000e25;
    --rbfb-gray-50: #f9fafb;
    --rbfb-gray-100: #f3f4f6;
    --rbfb-gray-200: #e5e7eb;
    --rbfb-gray-300: #d1d5db;
    --rbfb-gray-400: #9ca3af;
    --rbfb-gray-500: #979797;
    --rbfb-gray-600: #6b7280;
    --rbfb-gray-700: #374151;
    --rbfb-gray-800: #243247;
    --rbfb-gray-900: #111827;
    --rbfb-shadow-sm: #7587804d;
    --rbfb-shadow-xs: #6c7f9e1a;
    --rbfb-space-0: 0;
    --rbfb-space-1: 4px;
    --rbfb-space-2: 8px;
    --rbfb-space-3: 12px;
    --rbfb-space-4: 16px;
    --rbfb-space-5: 20px;
    --rbfb-space-6: 24px;
    --rbfb-space-7: 32px;
    --rbfb-space-8: 40px;
    --rbfb-space-9: 48px;
    --rbfb-space-10: 64px;
    --rbfb-font-family: 'Poppins', sans-serif;
    --rbfb-font-size-xs: 12px;
    --rbfb-font-size-sm: 14px;
    --rbfb-font-size-md: 16px;
    --rbfb-font-size-lg: 18px;
    --rbfb-font-size-xl: 20px;
    --rbfb-font-size-2xl: 24px;
    --rbfb-font-size-3xl: 30px;
    --rbfb-font-size-4xl: 36px;
    --rbfb-font-size-5xl: 48px;
    --rbfb-font-size-6xl: 60px;
    --rbfb-font-weight-thin: 100;
    --rbfb-font-weight-extralight: 200;
    --rbfb-font-weight-light: 300;
    --rbfb-font-weight-normal: 400;
    --rbfb-font-weight-medium: 500;
    --rbfb-font-weight-semibold: 600;
    --rbfb-font-weight-bold: 700;
    --rbfb-font-weight-extrabold: 800;
    --rbfb-font-weight-black: 900;
    --rbfb-radius-none: 0;
    --rbfb-radius-xs: 2px;
    --rbfb-radius-sm: 4px;
    --rbfb-radius-md: 8px;
    --rbfb-radius-lg: 12px;
    --rbfb-radius-xl: 24px;
    --rbfb-radius-2xl: 32px;
    --rbfb-radius-pill: 9999px;
    --rbfb-radius-full: 50%;
    --rbfb-style-none: none;
    --rbfb-style-solid: solid;
    --rbfb-style-dashed: dashed;
    --rbfb-style-dotted: dotted;
    --rbfb-size-extrasmall: extrasmall;
    --rbfb-size-small: small;
    --rbfb-size-medium: medium;
    --rbfb-size-large: large;
    --rbfb-size-extralarge: extralarge;
    --rbfb-align-start: start;
    --rbfb-align-end: end;
    --rbfb-align-center: center;
    --rbfb-align-between: between;
    --rbfb-align-around: around;
    --rbfb-align-evenly: evenly;
    --rbfb-inline-align-start: start;
    --rbfb-inline-align-end: end;
    --rbfb-inline-align-center: center;
    --rbfb-inline-align-baseline: baseline;
    --rbfb-inline-align-stretch: stretch;
    --rbfb-text-align-left: left;
    --rbfb-text-align-center: center;
    --rbfb-text-align-right: right;
    --rbfb-text-align-justify: justify;
    --rbfb-text-transform-none: none;
    --rbfb-text-transform-uppercase: uppercase;
    --rbfb-text-transform-capitalize: capitalize;
    --rbfb-text-transform-lowercase: lowercase;
    --rbfb-breakpoint-sm: 480px;
    --rbfb-breakpoint-md: 768px;
    --rbfb-breakpoint-lg: 1024px;
    --rbfb-breakpoint-xl: 1280px;
    --rbfb-transition-fast: 150ms ease;
    --rbfb-transition-normal: 300ms ease;
    --rbfb-transition-slow: 500ms ease;
    --rbfb-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

// Dark theme overrides
#rbfb-admin[rbfb-theme-status="dark"],
#rbfb-admin [rbfb-theme-status="dark"],
.rbfb-top-level-wrapper[rbfb-theme-status="dark"],
.rbfb-top-level-wrapper [rbfb-theme-status="dark"] {
    --rbfb-white: #151515;
    --rbfb-black: #ffffff;
    --rbfb-gray-50: #151515;
    --rbfb-gray-100: #1e1e1e;
    --rbfb-gray-200: #2c2c2c;
    --rbfb-gray-300: #3a3a3a;
    --rbfb-gray-400: #4a4a4a;
    --rbfb-gray-500: #5a5a5a;
    --rbfb-gray-600: #6b6b6b;
    --rbfb-gray-700: #7c7c7c;
    --rbfb-gray-800: #8c8c8c;
    --rbfb-gray-900: #9c9c9c;
}

// Light theme overrides (for scoped light elements inside dark parent)
#rbfb-admin[rbfb-theme-status="light"],
#rbfb-admin [rbfb-theme-status="light"],
.rbfb-top-level-wrapper[rbfb-theme-status="light"],
.rbfb-top-level-wrapper [rbfb-theme-status="light"] {
    --rbfb-white: #ffffff;
    --rbfb-black: #000e25;
    --rbfb-gray-50: #f9fafb;
    --rbfb-gray-100: #f3f4f6;
    --rbfb-gray-200: #e5e7eb;
    --rbfb-gray-300: #d1d5db;
    --rbfb-gray-400: #9ca3af;
    --rbfb-gray-500: #979797;
    --rbfb-gray-600: #6b7280;
    --rbfb-gray-700: #374151;
    --rbfb-gray-800: #243247;
    --rbfb-gray-900: #111827;
}
