////
///
/// Utilities Variables
/// ===========================================================================
///
/// Configuration variables for utility classes and mixins.
/// These provide defaults that can be overridden before importing utilities.
///
/// @group Variables.Utilities
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "../head_layout/transition" as *;

// ============================================================================
// Focus Ring
// ============================================================================

/// Default focus ring color
$focus-ring-color: rgba(13, 110, 253, 0.25) !default;

/// Focus ring width
$focus-ring-width: q(4) !default;

/// Focus ring opacity
$focus-ring-opacity: 0.25 !default;

/// Color-mix ratio for themed focus rings
$focus-ring-color-mix: 25% !default;

// ============================================================================
// Icon Link
// ============================================================================

/// Icon link gap between text and icon
$icon-link-gap: q(4) !default;

/// Icon link underline color opacity (color-mix percentage)
$icon-link-underline-opacity: 50% !default;

/// Icon link text underline offset
$icon-link-underline-offset: 0.25em !default;

/// Icon link icon size
$icon-link-icon-size: 1em !default;

/// Icon link transition duration
$icon-link-transition-duration: $transition-duration-base !default;

/// Icon link transition timing
$icon-link-transition-timing: $transition-timing-ease-in-out !default;

/// Icon link hover translate distance
$icon-link-hover-translate: 0.25em !default;

// ============================================================================
// Vertical Rule
// ============================================================================

/// Vertical rule width
$vertical-rule-width: q(1) !default;

/// Vertical rule minimum height
$vertical-rule-min-height: q(16) !default;

/// Vertical rule opacity
$vertical-rule-opacity: 0.25 !default;

// ============================================================================
// Text Truncation
// ============================================================================

/// Default number of lines for multi-line truncation
$text-truncate-lines-default: 2 !default;

// ============================================================================
// Aspect Ratios
// ============================================================================

/// Standard aspect ratios map
$aspect-ratios: (
    "1x1": 100%,
    "4x3": calc(3 / 4 * 100%),
    "16x9": calc(9 / 16 * 100%),
    "21x9": calc(9 / 21 * 100%),
    "3x2": calc(2 / 3 * 100%),
    "2x3": calc(3 / 2 * 100%),
) !default;

// ============================================================================
// Negative Margins (spacing scale)
// ============================================================================

/// Negative margin scale map (uses q() function values)
/// Note: These reference the spacing scale from head_layout/_space.scss
$negative-margin-scale: (
    "01": 4,
    // q(4)
    "02": 8,
    // q(8)
    "04": 16,
    // q(16)
    "08": 32, // q(32)
) !default;

// ============================================================================
// Stacks
// ============================================================================

/// Default gap for vertical stacks
$stack--vertical-gap: 0 !default;

/// Default gap for horizontal stacks
$stack--horizontal-gap: 0 !default;

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

:root {
    // Focus ring
    --focus-ring-color: #{$focus-ring-color};
    --focus-ring-width: #{$focus-ring-width};
    --focus-ring-opacity: #{$focus-ring-opacity};

    // Icon link
    --icon-link-gap: #{$icon-link-gap};
    --icon-link-underline-offset: #{$icon-link-underline-offset};
    --icon-link-icon-size: #{$icon-link-icon-size};
    --icon-link-transition-duration: #{$icon-link-transition-duration};
    --icon-link-hover-translate: #{$icon-link-hover-translate};

    // Vertical rule
    --vertical-rule-width: #{$vertical-rule-width};
    --vertical-rule-min-height: #{$vertical-rule-min-height};
    --vertical-rule-opacity: #{$vertical-rule-opacity};
}