@use "sass:color";

/* Using catppuccin for now, make a theme switcher later */
@use "./themes/catppuccin/catppuccin";

@function getColor($color) {
  $ctp-theme: map-get(catppuccin.$palette, "macchiato");
  @return map-get($ctp-theme, $color);
}

/*
*  ╭───────────────────────────────────────────────────────────╮
*  │                 Mini-Strap Design Tokens                  │
*  ╰───────────────────────────────────────────────────────────╯
* */

// ── Structure and convention ────────────────────────────────────────────

/*
*
* */

/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
$screen-sizes: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "2xl": 1536px,
);

$spacings: (
  0 "--prj-spacing-0" 0,
  1 "--prj-spacing-1" 0.25rem,
  2 "--prj-spacing-2" 0.5rem,
  3 "--prj-spacing-3" 1rem,
  4 "--prj-spacing-4" 2rem,
  5 "--prj-spacing-5" 3rem
);

$border-radius: 0.5rem;

// Native CSS Variables to allow overridings and usage in external stylesheets
:root {
  /* Variables prefixed with prj to avoid collisions */

  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
  --prj-bg: #{getColor("mantle")};
  --prj-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
  --prj-shadow: #{getColor("crust")};
  --prj-text: #{getColor("text")};

  --prj-surface-1: #{getColor("base")};
  --prj-surface-2: #{darken(getColor("surface0"), 2%)};
  --prj-surface-3: #{getColor("surface1")};
  --prj-surface-text: #{getColor("text")};

  --prj-link-text: #{getColor("teal")};

  --prj-accent-bg: #{getColor("teal")};
  --prj-accent-text: #{getColor("base")};

  --prj-primary: #{getColor("teal")};
  --prj-primary-text: #{getColor("base")};

  --prj-secondary: #{getColor("mauve")};
  --prj-secondary-text: #{getColor("base")};

  --prj-danger: #{getColor("red")};
  --prj-danger-text: #{getColor("base")};

  --prj-disabled: #{getColor("red")};
  --prj-disabled-text: rgba(#{getColor("raw")}, 0.5);

  --prj-input: #{getColor("text")};
  --prj-input-text: #{getColor("base")};

  @each $index, $variable, $value in $spacings {
    #{$variable}: #{$value};
  }

  --prj-border-radius: #{$border-radius};
}