@charset "UTF-8";
/**
 * Convert value to rem based on root font size
 * Necessary because Figma exports values without units
 *
 * @param {String|Number} $value - Value to convert
 * @return {String} - calc() expression for rem conversion
 *
 * @example
 *   border-radius: hw13-rem-convert(var(--hw13-image-border-radius));
 *   // Output: calc((var(--hw13-image-border-radius) / var(--hw13-root-font-size)) * 1rem)
 */
/**
 * Convert value to em based on root font size
 * Necessary because Figma exports values without units
 *
 * @param {String|Number} $value - Value to convert
 * @return {String} - calc() expression for em conversion
 *
 * @example
 *   border-radius: hw13-em-convert(var(--hw13-image-border-radius));
 *   // Output: calc((var(--hw13-image-border-radius) / var(--hw13-root-font-size)) * 1em)
 */
/**
 * Convert unitless value to pixels
 *
 * @param {Number} $value - Unitless number to convert
 * @return {String} - calc() expression for px value
 *
 * @example
 *   outline-width: hw13-px-convert(var(--hw-card-border-width));
 *   // Output: calc(var(--hw-card-border-width) * 1px)
 */
/**
 * Fluid typography/spacing with clamp()
 * Supports viewport units (vw, vh) and container query units (cqi, cqh)
 *
 * @param {String} $unit - vw, vh, cqi, or cqh
 * @param {Number|String} $minSize - Minimum size (px or CSS var)
 * @param {Number|String} $maxSize - Maximum size (px or CSS var)
 * @param {Number} $minWidth - Min viewport/container width (optional, unit-specific defaults)
 * @param {Number} $maxWidth - Max viewport/container width (optional, unit-specific defaults)
 * @return {String} - clamp() calculation
 *
 * @example
 *   font-size: hw13-clamp(cqi, var(--hw-size-16), var(--hw-size-32), 20, 31);
 *   padding: hw13-clamp(vw, 1rem, 3rem);
 */
/**
 * Resolve breakpoint value (helper function for hw13-query)
 * Converts breakpoint names to actual values from $hw13-breakpoints map
 *
 * @param {String|Number} $breakpoint-value - Breakpoint name or direct value
 * @return {Number} - Resolved breakpoint value
 * @access private
 */
/**
 * Unified mixin for media queries and container queries
 * Supports breakpoint names from $hw13-breakpoints map
 *
 * @param {Map} $breakpoints - Map with "from" and/or "to" keys
 * @param {String} $type - "media" or "container"
 * @param {String} $container-name - Optional container name (for container queries)
 *
 * @example
 *   // Media query with breakpoint names
 *   @include hw13-query((from: "m", to: "l"), "media") {
 *     font-size: 2rem;
 *   }
 *
 *   // Container query with direct value
 *   @include hw13-query((from: 20rem), "container", "hw13-card") {
 *     padding: 2rem;
 *   }
 *
 *   // Range query
 *   @include hw13-query((from: "s", to: "m"), "media") {
 *     display: none;
 *   }
 */
/**
 * Recursively generate CSS custom properties from SCSS map
 * Creates --hw13-prefixed variables
 *
 * @param {Map} $map - Nested map of CSS properties
 * @param {String} $prefix - Internal prefix for recursion (don't pass manually)
 *
 * @example
 *   $css-variables: (
 *     image-card: (
 *       padding: 1rem,
 *       color: (
 *         default: red,
 *         hover: blue,
 *       ),
 *     ),
 *   );
 *
 *   @include hw13-generate-css-vars($css-variables);
 *
 *   // Generates:
 *   // --hw13-image-card-padding: 1rem;
 *   // --hw13-image-card-color-default: red;
 *   // --hw13-image-card-color-hover: blue;
 */
/**
 * Generate @font-face declarations for custom fonts
 * Supports both variable and non-variable fonts
 *
 * @param {String} $font-family - Font family name
 * @param {String} $font-folder - Folder name in fonts directory
 * @param {String} $font-name - Base font file name (without weight/style suffix)
 * @param {Map} $font-weights-styles - Map of weights to styles
 * @param {Boolean} $is-variable - Whether font is a variable font (default: false)
 *
 * @example Variable font
 *   @include hw13-font-face(
 *     "Raleway Variable",
 *     "raleway",
 *     "Raleway",
 *     (
 *       normal: (100, 900),
 *       italic: (100, 900)
 *     ),
 *     true
 *   );
 *
 * @example Non-variable font
 *   @include hw13-font-face(
 *     "Raleway",
 *     "raleway",
 *     "Raleway",
 *     (
 *       400: (normal, italic),
 *       700: (normal, italic)
 *     )
 *   );
 */
/**
 * Calculate the width of elements spanning multiple grid columns
 * Based on Figma grid with 24 columns and 23 gutters
 *
 * @param {Number} $column-span - Number of columns the element should span
 * @param {String} $grid-column-count - CSS variable for total column count (default: var(--hw13-grid-column-count))
 * @param {String} $grid-gutter - CSS variable for gutter width (default: var(--hw13-grid-width-gutter))
 * @return {String} - calc() expression for the element width
 *
 * @example
 *   // Using defaults (24 columns, standard gutter)
 *   section {
 *     flex: 0 0 hw13-grid-column-width(14);
 *   }
 *
 *   // Custom grid (12 columns, custom gutter)
 *   aside {
 *     width: hw13-grid-column-width(8, var(--custom-column-count), var(--custom-gutter));
 *   }
 *
 * Formula:
 * 1. Calculate pure column width: (100% - (gutter × (columns - 1))) / columns
 * 2. Multiply by column span
 * 3. Add back the gutters within the span: gutter × (span - 1)
 */
@layer hw13-link {
  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness var(--hw13-motion-duration-short, 150ms) var(--hw13-motion-timing-function, ease), text-underline-offset var(--hw13-motion-duration-short, 150ms) var(--hw13-motion-timing-function, ease), text-decoration-color var(--hw13-motion-duration-short, 150ms) var(--hw13-motion-timing-function, ease);
  }
  a:hover, a:focus-visible {
    text-decoration-thickness: 3px;
    text-underline-offset: calc(0.2em - 1px);
  }
}

/*# sourceMappingURL=hw13_link.css.map */