/* ══════════════════════════════════════════════
   SACC Design Tokens
   Single source of truth for color, spacing, radius,
   elevation and z-index across the public site,
   dashboard, and shared component library.

   These alias the Bootstrap 5.3 custom properties that
   the compiled landingpage/bootstrap.css and
   inspinia/app.min.css bundles already emit, so:
     - dark mode ([data-bs-theme="dark"]) applies for free
     - switching the INSPINIA theme variant re-colors
       every component that uses these tokens
   Never hardcode hex colors outside this file — reference
   a --sacc-* token instead, or extend this file if the
   token you need doesn't exist yet.
   ══════════════════════════════════════════════ */

:root {
    /* Brand colors */
    --sacc-color-primary: var(--bs-primary, #1ab394);
    --sacc-color-primary-rgb: var(--bs-primary-rgb, 26, 179, 148);
    --sacc-color-secondary: var(--bs-secondary, #1c84c6);
    --sacc-color-success: var(--bs-success, #0acf97);
    --sacc-color-danger: var(--bs-danger, #ed5565);
    --sacc-color-warning: var(--bs-warning, #f8ac59);
    --sacc-color-info: var(--bs-info, #23c6c8);
    --sacc-color-dark: var(--bs-dark, #313a46);

    /* Hover/active shades derived from the brand color itself, so they
       follow automatically if the theme variant or brand color changes */
    --sacc-color-primary-hover: color-mix(in srgb, var(--sacc-color-primary) 85%, black);
    --sacc-color-danger-hover: color-mix(in srgb, var(--sacc-color-danger) 85%, black);

    /* Official third-party brand colors (social/contact links). Always flat -
       never wrap these in gradients. Hover = color-mix(in srgb, token 85%, black). */
    --sacc-color-whatsapp: #25d366;
    --sacc-color-facebook: #1877f2;
    --sacc-color-twitter: #1da1f2;
    --sacc-color-linkedin: #0077b5;
    --sacc-color-instagram: #e1306c;
    --sacc-color-youtube: #ff0000;

    /* Surfaces & text - theme/dark-mode aware via Bootstrap 5.2+ variables.
       The fallback values are REQUIRED: the public site's compiled
       landingpage/bootstrap.css is Bootstrap 5.0, which does not emit
       --bs-border-color / --bs-body-bg / --bs-tertiary-bg / --bs-body-color /
       --bs-secondary-color at all. Without fallbacks these tokens resolve to
       nothing there, and every declaration using them (borders, surfaces,
       text colors) is silently dropped - that's how the Epayments inputs
       lost their borders entirely. */
    --sacc-color-surface: var(--bs-body-bg, #ffffff);
    --sacc-color-surface-alt: var(--bs-tertiary-bg, #f8f9fa);
    --sacc-color-border: var(--bs-border-color, #dee2e6);
    --sacc-color-text: var(--bs-body-color, #212529);
    --sacc-color-text-muted: var(--bs-secondary-color, #6c757d);

    /* Radius */
    --sacc-radius-sm: 0.25rem;
    --sacc-radius-md: 0.5rem;
    --sacc-radius-pill: 50rem;

    /* Spacing scale (4px base) */
    --sacc-space-1: 0.25rem;
    --sacc-space-2: 0.5rem;
    --sacc-space-3: 0.75rem;
    --sacc-space-4: 1rem;
    --sacc-space-5: 1.5rem;
    --sacc-space-6: 2rem;

    /* Elevation */
    --sacc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sacc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* z-index scale, anchored to Bootstrap's own modal/backdrop values
       (--theme-modal-zindex: 1055, --theme-backdrop-zindex: 1050) so any
       component library's popups stay predictably above/below them
       instead of depending on CSS load order or vendor defaults. */
    --sacc-z-sticky: 1020;
    --sacc-z-backdrop: 1050;
    --sacc-z-modal: 1055;
    --sacc-z-dropdown: 1060;
    --sacc-z-popover: 1070;
    --sacc-z-tooltip: 1080;
    --sacc-z-toast: 1090;
}