////
///
/// Spacing Tokens
/// ===========================================================================
///
/// Design token definitions for spacing scale.
/// Only :root CSS custom properties, no selectors.
///
/// @group Lexicon
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

:root {
    // ========================================================================
    // Base Unit
    // ========================================================================

    --ss-spacing-unit: #{q(4)};

    // ========================================================================
    // Scale
    // ========================================================================

    --ss-spacing-0: 0;
    --ss-spacing-px: #{q(1)};
    --ss-spacing-0-5: calc(var(--ss-spacing-unit) * 0.5);
    --ss-spacing-1: var(--ss-spacing-unit);
    --ss-spacing-1-5: calc(var(--ss-spacing-unit) * 1.5);
    --ss-spacing-2: calc(var(--ss-spacing-unit) * 2);
    --ss-spacing-2-5: calc(var(--ss-spacing-unit) * 2.5);
    --ss-spacing-3: calc(var(--ss-spacing-unit) * 3);
    --ss-spacing-3-5: calc(var(--ss-spacing-unit) * 3.5);
    --ss-spacing-4: calc(var(--ss-spacing-unit) * 4);
    --ss-spacing-5: calc(var(--ss-spacing-unit) * 5);
    --ss-spacing-6: calc(var(--ss-spacing-unit) * 6);
    --ss-spacing-7: calc(var(--ss-spacing-unit) * 7);
    --ss-spacing-8: calc(var(--ss-spacing-unit) * 8);
    --ss-spacing-9: calc(var(--ss-spacing-unit) * 9);
    --ss-spacing-10: calc(var(--ss-spacing-unit) * 10);
    --ss-spacing-11: calc(var(--ss-spacing-unit) * 11);
    --ss-spacing-12: calc(var(--ss-spacing-unit) * 12);
    --ss-spacing-14: calc(var(--ss-spacing-unit) * 14);
    --ss-spacing-16: calc(var(--ss-spacing-unit) * 16);
    --ss-spacing-20: calc(var(--ss-spacing-unit) * 20);
    --ss-spacing-24: calc(var(--ss-spacing-unit) * 24);
    --ss-spacing-28: calc(var(--ss-spacing-unit) * 28);
    --ss-spacing-32: calc(var(--ss-spacing-unit) * 32);
    --ss-spacing-36: calc(var(--ss-spacing-unit) * 36);
    --ss-spacing-40: calc(var(--ss-spacing-unit) * 40);
    --ss-spacing-44: calc(var(--ss-spacing-unit) * 44);
    --ss-spacing-48: calc(var(--ss-spacing-unit) * 48);
    --ss-spacing-52: calc(var(--ss-spacing-unit) * 52);
    --ss-spacing-56: calc(var(--ss-spacing-unit) * 56);
    --ss-spacing-60: calc(var(--ss-spacing-unit) * 60);
    --ss-spacing-64: calc(var(--ss-spacing-unit) * 64);
    --ss-spacing-72: calc(var(--ss-spacing-unit) * 72);
    --ss-spacing-80: calc(var(--ss-spacing-unit) * 80);
    --ss-spacing-96: calc(var(--ss-spacing-unit) * 96);

    // ========================================================================
    // Semantic aliases (`--ss-space-*`)
    // ========================================================================
    //
    // Components (card, button, dropcap, …) author against a `--ss-space-*`
    // family — both a T-shirt scale and short numeric names — but only the
    // `--ss-spacing-*` grid above was ever defined, so those references
    // resolved to *nothing* (e.g. cards rendered with 0 padding). These
    // aliases map the `--ss-space-*` names onto the same baseline grid, so the
    // whole set matches the old StyleScape rhythm (sm = 8px, md = 16px, …).

    // T-shirt scale
    --ss-space-2xs: var(--ss-spacing-0-5); // 2px
    --ss-space-xs: var(--ss-spacing-1); // 4px
    --ss-space-sm: var(--ss-spacing-2); // 8px
    --ss-space-md: var(--ss-spacing-4); // 16px
    --ss-space-lg: var(--ss-spacing-6); // 24px
    --ss-space-xl: var(--ss-spacing-8); // 32px
    --ss-space-2xl: var(--ss-spacing-12); // 48px
    --ss-space-3xl: var(--ss-spacing-16); // 64px
    --ss-space-4xl: var(--ss-spacing-24); // 96px

    // Short numeric aliases (`--ss-space-4` === `--ss-spacing-4`)
    --ss-space-1: var(--ss-spacing-1);
    --ss-space-2: var(--ss-spacing-2);
    --ss-space-3: var(--ss-spacing-3);
    --ss-space-4: var(--ss-spacing-4);
    --ss-space-5: var(--ss-spacing-5);
    --ss-space-6: var(--ss-spacing-6);
    --ss-space-8: var(--ss-spacing-8);
}