@use "sass:map";
@use "sass:color";

@function to-rgb($oklch-color) {
  @return color.to-space($oklch-color, rgb);
}

$colors: (
  red: to-rgb(oklch(0.704 0.191 22.216)),
  orange: to-rgb(oklch(0.75 0.183 55.934)),
  amber: to-rgb(oklch(0.828 0.189 84.429)),
  yellow: to-rgb(oklch(0.852 0.199 91.936)),
  lime: to-rgb(oklch(0.841 0.238 128.85)),
  green: to-rgb(oklch(0.792 0.209 151.711)),
  emerald: to-rgb(oklch(0.765 0.177 163.223)),
  teal: to-rgb(oklch(0.777 0.152 181.912)),
  cyan: to-rgb(oklch(0.789 0.154 211.53)),
  sky: to-rgb(oklch(0.746 0.16 232.661)),
  blue: to-rgb(oklch(0.707 0.165 254.624)),
  indigo: to-rgb(oklch(0.673 0.182 276.935)),
  violet: to-rgb(oklch(0.702 0.183 293.541)),
  purple: to-rgb(oklch(0.714 0.203 305.504)),
  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),
  pink: to-rgb(oklch(0.718 0.202 349.761)),
  rose: to-rgb(oklch(0.712 0.194 13.428)),
  slate: to-rgb(oklch(0.704 0.04 256.788)),
  gray: to-rgb(oklch(0.707 0.022 261.325)),
  zinc: to-rgb(oklch(0.705 0.015 286.067)),
  neutral: to-rgb(oklch(0.708 0 0)),
  stone: to-rgb(oklch(0.709 0.01 56.259)),
);

@function color-map($base, $offset: 0%) {
  @return (
    lightest: color.scale($base, $lightness: 90% + $offset),
    lighter: color.scale($base, $lightness: 75% + $offset),
    light: color.scale($base, $lightness: 60% + $offset),
    default: $base,
    dark: color.scale($base, $lightness: 10% + $offset),
    darker: color.scale($base, $lightness: 25% + $offset),
    darkest: color.scale($base, $lightness: 40% + $offset)
  );
}

$vars: (
  theme: (
    "gray": color-map(map.get($colors, gray), -5%),
    blue-gray: color-map(map.get($colors, slate)),
    primary: color-map(map.get($colors, blue)),
    secondary: color-map(map.get($colors, blue)),
    info: color-map(map.get($colors, cyan)),
    success: color-map(map.get($colors, lime)),
    warning: color-map(map.get($colors, orange)),
    danger: color-map(map.get($colors, red)),
  ),
  trans: (
    darkest: rgba(0, 0, 0, 0.5),
    darker: rgba(0, 0, 0, 0.4),
    dark: rgba(0, 0, 0, 0.3),
    default: rgba(0, 0, 0, 0.2),
    light: rgba(0, 0, 0, 0.1),
    lighter: rgba(0, 0, 0, 0.05),
    lightest: rgba(0, 0, 0, 0.03),
    rev-default: rgba(255, 255, 255, 0.1),
    rev-light: rgba(255, 255, 255, 0.2),
    rev-lighter: rgba(255, 255, 255, 0.3),
    rev-lightest: rgba(255, 255, 255, 0.4),
  ),
  text-trans: (
    dark: black,
    default: rgba(0, 0, 0, 0.87),
    light: rgba(0, 0, 0, 0.6),
    lighter: rgba(0, 0, 0, 0.38),
    lightest: rgba(0, 0, 0, 0.2),
    rev-default: white,
    rev-dark: rgba(255, 255, 255, 0.7),
    rev-darker: rgba(255, 255, 255, 0.5),
  ),
  font-size: (
    lg: 14px,
    default: 12px,
    sm: 11px,
    h1: 24px,
    h2: 18px,
    h3: 16px,
    h4: 14px,
    h5: 12px,
    h6: 11px,
  ),
  gap: (
    xxs: 1px,
    xs: 2px,
    sm: 4px,
    default: 6px,
    lg: 8px,
    xl: 12px,
    xxl: 18px,
    0: 0,
    auto: "auto",
  ),
  border-color: (
    lighter: var(--theme-gray-lightest),
    light: var(--theme-gray-lighter),
    default: var(--theme-gray-light),
    dark: var(--theme-gray-default),
    darker: var(--theme-gray-dark),
  ),
  border-radius: (
    xs: var(--gap-xxs),
    sm: var(--gap-xs),
    default: var(--gap-sm),
    lg: var(--gap-default),
    xl: var(--gap-lg),
    xxl: var(--gap-xl),
  ),
  z-index: (
    toast: 9999,
    busy: 9998,
    dropdown: 5000,
    modal: 4000,
    sidebar: 3000,
  ),
  line-height: 1.5em,
  line-height-strip-unit: 1.5,
  font-family: sans-serif,
  //font-family: "'Pretendard Variable', 'Noto Sans KR', sans-serif",
  font-family-monospace: monospace,
  background-color: white,
  //var(--theme-gray-lightest),
  background-rev-color: black,
  control-color: white,
  animation-duration: 0.2s,
  elevation-size: 1px,
  sidebar: (
    width: 15em,
  ),
  topbar: (
    height: 3em,
  ),
  sheet: (
    pv: var(--gap-xs),
    ph: var(--gap-sm),
    bg: var(--theme-gray-lightest),
  ),
);