////
///
/// 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 Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

@use "../../../01-core/external" as *;

: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);
}