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

/** ensure default theme color */

// background
$vp-bg: "var(--c-bg, #fff)";

// background light
$vp-bgl: "var(--c-bg-light, #f3f4f5)";

// background lighter
$vp-bglt: "var(--c-bg-lighter, #eeeeee)";

// color
$vp-c: "var(--c-text, #2c3e50)";

// color
$vp-cl: "var(--c-text-light, #3a5169)";

// color lighter
$vp-clt: "var(--c-text-lighter, #4e6e8e)";

// border-color
$vp-brc: "var(--c-border, #eaecef)";

// border-color dark
$vp-brcd: "var(--c-border-dark, #dfe2e5)";

// theme color
$vp-tc: "var(--c-brand, #3eaf7c)";
$vp-tcl: "var(--c-brand-light, #4abf8a)";

// color transition
$vp-ct: "var(--t-color, 0.3s ease)";

// transform transition
$vp-tt: "var(--t-transform, 0.3s ease)";

/** shadow */
$box-shadow: (
  light: #f0f1f2,
  dark: #0f0e0d,
) !default;
$card-shadow: (
  light: rgb(0 0 0 / 15%),
  dark: rgb(0 0 0 / 30%),
) !default;

/* constants */
$black: (
  light: #000,
  dark: #fff,
) !default;
$grey-dark: (
  light: #666,
  dark: #999,
) !default;
$grey-light: (
  light: #999,
  dark: #666,
) !default;
$white: (
  light: #fff,
  dark: #000,
) !default;
$grey-darker: (
  light: #333,
  dark: #bbb,
) !default;
$grey-lighter: (
  light: #bbb,
  dark: #333,
) !default;
$grey14: (
  light: #eee,
  dark: #111,
) !default;