// 토큰 접근 함수 — 디자인 시스템 규율을 **컴파일러가 강제**하는 지점.
//
// 화면 코드는 `color: #256EF4`나 `padding: 13px`를 쓸 수 없고, 반드시
// `color: fox.color(font-neutral-strong)` / `padding: fox.padding(6)`로 토큰을
// 지목해야 한다. 존재하지 않는 이름을 쓰면 `@error`로 **빌드가 실패**하고 사용
// 가능한 토큰 목록이 함께 출력된다.
//
// 반환값은 CSS 커스텀 프로퍼티 참조(`var(--fox-*)`)다. 값이 아니라 참조를 돌려주므로
// (1) 라이트/다크와 pc/모바일이 런타임에 전환되고 (2) 특정 영역만 토큰을 덮어쓰는
// 스코프 오버라이드가 가능하며 (3) devtools에서 어떤 토큰인지 그대로 보인다.

@use "sass:map";
@use "tokens";

/// 토큰 이름을 검증하고 커스텀 프로퍼티 참조를 반환한다.
@function _token($group, $key, $registry, $var-name) {
  @if not map.has-key($registry, $key) {
    @error "[@fox] 알 수 없는 #{$group} 토큰: `#{$key}` — 사용 가능한 값: #{map.keys($registry)}";
  }

  @return var(--fox-#{$var-name});
}


@function color($name) {
  @return _token("color", $name, tokens.$color, "color-#{$name}");
}

@function primitive($name) {
  @return _token("primitive", $name, tokens.$primitive, "primitive-#{$name}");
}

@function theme($name) {
  @return _token("theme", $name, tokens.$theme, "theme-#{$name}");
}

@function number($name) {
  @return _token("number", $name, tokens.$number, "number-#{$name}");
}

@function font-family($name) {
  @return _token("font-family", "family-#{$name}", tokens.$font, "font-family-#{$name}");
}

@function font-weight($name) {
  @return _token("font-weight", "weight-#{$name}", tokens.$font, "font-weight-#{$name}");
}

@function border($name) {
  @return _token("border", "border-#{$name}", tokens.$size, "border-#{$name}");
}

@function padding($name) {
  @return _token("padding", "padding-#{$name}", tokens.$size, "padding-#{$name}");
}

@function gap($name) {
  @return _token("gap", "gap-#{$name}", tokens.$size, "gap-#{$name}");
}

@function radius($name) {
  @return _token("radius", "radius-#{$name}", tokens.$size, "radius-#{$name}");
}

@function icon($name) {
  @return _token("icon", "icon-#{$name}", tokens.$size, "icon-#{$name}");
}

@function shadow($name) {
  @return _token("shadow", "shadow-#{$name}", tokens.$size, "shadow-#{$name}");
}

@function backdrop($name) {
  @return _token("backdrop", "backdrop-#{$name}", tokens.$size, "backdrop-#{$name}");
}

@function font-size($name) {
  @return _token("font-size", "font-size-#{$name}", tokens.$responsive, "font-size-#{$name}");
}

@function form($name) {
  @return _token("form", "form-#{$name}", tokens.$responsive, "form-#{$name}");
}

@function grid($name) {
  @return _token("grid", "grid-#{$name}", tokens.$responsive, "grid-#{$name}");
}

@function card($name) {
  @return _token("card", "card-#{$name}", tokens.$responsive, "card-#{$name}");
}

@function modal($name) {
  @return _token("modal", "modal-#{$name}", tokens.$responsive, "modal-#{$name}");
}

@function spacing($name) {
  @return _token("spacing", "spacing-#{$name}", tokens.$responsive, "spacing-#{$name}");
}

@function section($name) {
  @return _token("section", "section-#{$name}", tokens.$responsive, "section-#{$name}");
}