/**
 * Branding System - CSS Custom Properties for Runtime Theming
 *
 * This file defines CSS custom properties (CSS variables) that enable runtime theming
 * and branding customization throughout the component library.
 *
 * ## CSS Custom Properties Defined
 *
 * ### Primary Colors (Blues)
 * - `--mosaic-primary`: Base primary light color (#28aae1)
 * - `--mosaic-secondary`: Base variant (#1478af - auto-derived using RGB relative color syntax)
 * - `--mosaic-accent`: Darker variant (#00467d - auto-derived using RGB relative color syntax)
 *
 * ### Neutral Colors (Grays)
 * - `--mosaic-neutral`: Base neutral color (#b7b7b7)
 * - `--mosaic-neutral-1`: Darker variant (#707070)
 * - `--mosaic-neutral-2`: Lighter variant (#dddddd)
 * - `--mosaic-neutral-3`: Lightest variant (#eeeeee)
 *
 * ### Semantic Colors
 * - `--mosaic-error`: Error/danger state color (#f06c55 - red)
 * - `--mosaic-warning`: Warning state color (#ffc81a - yellow)
 * - `--mosaic-success`: Success state color (#95c852 - green)
 *
 * ## Runtime Theming Usage
 *
 * The library uses CSS `@layer ax-defaults` to ensure default colors have the lowest
 * priority in the cascade. This allows easy overriding without `!important`.
 *
 * ### Simple Override (Recommended)
 *
 * Override colors in your application's CSS/SCSS:
 *
 *   :root {
 *     --mosaic-secondary: #ff5733;  // No !important needed
 *     --mosaic-neutral: #666666;
 *   }
 *
 * ### Example - Purple Theme
 *
 *   :root {
 *     --mosaic-primary: #9d7aed;
 *   }
 *   // --mosaic-secondary and --mosaic-accent automatically adjust!
 *
 * ### Dynamic Runtime Override
 *
 *   document.documentElement.style.setProperty('--mosaic-primary', '#9d7aed');
 *
 * ### Why This Works
 *
 * - Library defaults are in `@layer ax-defaults` (lowest priority)
 * - Your overrides are in the implicit anonymous layer (higher priority)
 * - No `!important` needed - cascade just works!
 * - Load order doesn't matter - layers handle priority
 *
 * ## Browser Support
 *
 * - CSS Relative Color Syntax (`rgb(from var(...))`) requires:
 *   - Chrome 119+
 *   - Firefox 128+
 *   - Safari 16.4+
 * - For older browsers, colors fallback to the default hardcoded values
 */

/**
 * Using @layer to ensure these defaults have the lowest priority in the cascade.
 * This allows consuming applications to override colors without !important.
 */
@layer ax-defaults {
  :root {
    /* Base Primary Light Color - override this to change the entire primary palette */
    --mosaic-primary: #28aae1;
    --mosaic-secondary: #1478af;
    --mosaic-secondary: rgb(
      from var(--mosaic-primary) calc(r * 0.5) calc(g * 0.706) calc(b * 0.778)
    );
    --mosaic-accent: #00467d;
    --mosaic-accent: rgb(
      from var(--mosaic-primary) calc(r * 0) calc(g * 0.412) calc(b * 0.556)
    );

    --mosaic-neutral: #b7b7b7;
    --mosaic-neutral-1: #707070;
    --mosaic-neutral-2: #dddddd;
    --mosaic-neutral-3: #eeeeee;

    /* Semantic Colors */
    --mosaic-error: #f06c55;
    --mosaic-warning: #ffc81a;
    --mosaic-success: #95c852;
  }
}
