$rounded: 0.8rem;

$widget-padding: 0.75rem 0.65rem;
$widget-margin: 0.2rem;

$panel-widget-margin: 0.4rem;

$icon-size: 1.25rem;

$text-base: 1.2rem;
$text-lg: 1.4rem;
$text-xl: 1.8rem;
$text-2xl: 2.6rem;

$m-base: 0.4rem;
$m-lg: 1.5rem;
$m-xl: 2rem;
$m-2xl: 3rem;

$p-base: 1rem;
$p-lg: 1.5rem;
$p-xl: 2rem;
$p-2xl: 3rem;

$design-tokens: (
  font-sizes: (
    small: 16px,
    default: 18px,
    large: 20px,
    extra: 30px,
  ),
  padding: (
    small: 4px,
    default: 10px 8px,
    large: 10px,
    extra: 12px,
  ),
  margin: (
    small: 4px,
    default: 6px,
    large: 8px,
    extra: 16px,
  ),
  border-radius: (
    small: 4px,
    default: 6px,
    large: 8px,
    extra: 16px,
  ),
);

@function get-token($category, $key: null) {
  $tokens: map-get($design-tokens, $category);

  @if $tokens ==null {
    @error "Category `#{$category}` not found in design tokens.";
  }

  @if $key ==null {
    @if map-has-key($tokens, default) {
      $key: default;
    } @else {
      @error "Default key not found in category `#{$category}`.";
    }
  }

  $value: map-get($tokens, $key);

  @if $value ==null {
    @error "Token `#{$key}` not found in category `#{$category}`.";
  }

  @return $value;
}
