////
///
/// Size CSS Custom Properties
/// ===========================================================================
///
/// Primitive and semantic size tokens for element dimensions.
/// Uses the q() function from unit.gl for consistent sizing.
///
/// Primitive tokens: Raw size values (--primitive-size-*)
/// Semantic tokens: Contextual sizes (--semantic-size--*)
///
/// @group Variables.HeadLayout
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// CSS Custom Properties
// ============================================================================

:root {
    // Primitive Size Tokens
    // -------------------------------------------------------------------------
    /// @prop {Length} --primitive-size-80 - Extra extra large size
    --primitive-size-80: q(80);
    /// @prop {Length} --primitive-size-72 - Extra large size
    --primitive-size-72: q(72);
    /// @prop {Length} --primitive-size-64 - Large size
    --primitive-size-64: q(64);
    /// @prop {Length} --primitive-size-56 - Medium-large size
    --primitive-size-56: q(56);
    /// @prop {Length} --primitive-size-48 - Medium size
    --primitive-size-48: q(50);
    /// @prop {Length} --primitive-size-40 - Standard size
    --primitive-size-40: q(40);
    /// @prop {Length} --primitive-size-36 - Medium-small size
    --primitive-size-36: q(36);
    /// @prop {Length} --primitive-size-32 - Small size
    --primitive-size-32: q(32);
    /// @prop {Length} --primitive-size-28 - Extra small size
    --primitive-size-28: q(30);
    /// @prop {Length} --primitive-size-24 - Compact size
    --primitive-size-24: q(24);
    /// @prop {Length} --primitive-size-20 - Tight size
    --primitive-size-20: q(20);
    /// @prop {Length} --primitive-size-16 - Minimal size
    --primitive-size-16: q(16);
    /// @prop {Length} --primitive-size-12 - Tiny size
    --primitive-size-12: q(12);
    /// @prop {Length} --primitive-size-08 - Micro size
    --primitive-size-08: q(8);
    /// @prop {Length} --primitive-size-04 - Hairline size
    --primitive-size-04: q(4);
    /// @prop {Length} --primitive-size-02 - Pixel size
    --primitive-size-02: q(2);
    /// @prop {Length} --primitive-size-01 - Sub-pixel size
    --primitive-size-01: q(1);
    /// @prop {Length} --primitive-size-none - Zero size
    --primitive-size-none: 0;

    // Semantic Size Tokens
    // -------------------------------------------------------------------------
    /// @prop {Length} --semantic-size--xxl - Extra extra large semantic size
    --semantic-size--xxl: var(--primitive-size-64);
    /// @prop {Length} --semantic-size--xl - Extra large semantic size
    --semantic-size--xl: var(--primitive-size-48);
    /// @prop {Length} --semantic-size--lg - Large semantic size
    --semantic-size--lg: var(--primitive-size-40);
    /// @prop {Length} --semantic-size--md - Medium semantic size
    --semantic-size--md: var(--primitive-size-32);
    /// @prop {Length} --semantic-size--sm - Small semantic size
    --semantic-size--sm: var(--primitive-size-24);
    /// @prop {Length} --semantic-size--xs - Extra small semantic size
    --semantic-size--xs: var(--primitive-size-16);
}