/**
 * ==========================================================================
 * StabilityTest Theme - Variables
 * ==========================================================================
 *
 * Global design system variables used throughout the theme.
 *
 * Responsibilities:
 *
 * - Color palette
 * - Typography variables
 * - Border variables
 * - Visual effects
 * - Layout dimensions
 * - Border radius values
 * - Future design tokens
 *
 * All reusable CSS custom properties should be defined
 * within this file and referenced throughout the theme.
 *
 * @package StabilityTest_Theme
 * @since 1.0.0
 * ==========================================================================
 */

:root {

    /* ---------------------------------------------------------------------
       Core Colors
       --------------------------------------------------------------------- */

    --stabilitytest-color-background: #09090f;
    --stabilitytest-color-surface: #0f1017;
    --stabilitytest-color-surface-hover: #13141d;

    /* ---------------------------------------------------------------------
       Typography
       --------------------------------------------------------------------- */

    --stabilitytest-color-text: #e8eaf0;
    --stabilitytest-color-text-muted: #9aa1b2;
    --stabilitytest-color-text-subtle: #7a8090;
    --stabilitytest-color-text-faint: #6f7688;
    --stabilitytest-color-text-footer: #4a5060;

    /* ---------------------------------------------------------------------
       Brand Colors
       --------------------------------------------------------------------- */

    --stabilitytest-color-primary: #62e68d;
    --stabilitytest-color-secondary: #2f8cff;

    --stabilitytest-gradient-primary:
        linear-gradient(
            135deg,
            #2f8cff 0%,
            #42b5ff 30%,
            #4ecdc4 65%,
            #62e68d 100%
        );

    /* ---------------------------------------------------------------------
       Borders
       --------------------------------------------------------------------- */

    --stabilitytest-border-light: rgba(255,255,255,0.08);
    --stabilitytest-border-medium: rgba(255,255,255,0.12);
    --stabilitytest-border-strong: rgba(255,255,255,0.16);

    /* ---------------------------------------------------------------------
       Effects
       --------------------------------------------------------------------- */

    --stabilitytest-glow-primary: rgba(98,230,141,0.18);
    --stabilitytest-glow-secondary: rgba(47,140,255,0.18);
    --stabilitytest-background-glow: rgba(74,158,255,0.06);

    /* ---------------------------------------------------------------------
       Layout
       --------------------------------------------------------------------- */

    --stabilitytest-container-width: 1180px;
    --stabilitytest-content-width: 880px;

    /* ---------------------------------------------------------------------
       Radius
       --------------------------------------------------------------------- */

    --stabilitytest-radius-sm: 7px;
    --stabilitytest-radius-md: 10px;
    --stabilitytest-radius-pill: 999px;
}