@use 'sass:map';

$common: (
  'font-family': 'Rubik, sans-serif',
  'font-family-spicy': '"Moe-Mashiro",sans-serif',
  'color-primary': var(--va-c-primary),
  'color-action': var(--va-c-primary-dark),
  'color-background': var(--va-c-bg),
  'color-muted-background': var(--va-bg-mute-color),
  'color-overlay-background': oklch(16.83% 0.0061 248.19 / 75%),
  'color-divider': oklch(94.31% 0 0),
  'scrollbar-bg': var(--sakura-color-background),
  'scrollbar-thumb': var(--sakura-color-primary),
  'scrollbar-thumb-hover': oklch(67.17% 0.0163 271.17),
  'radius': 10px,
  'radius-large': 15px,
  'radius-small': 5px,
  // --------------- Navbar ---------------
  'navbar-height': 65px,
  'navbar-marker-height': 2px,
  'navbar-marker-color': var(--sakura-color-primary),
  'navbar-mt': 20px,
  'navbar-spacing': calc(var(--sakura-navbar-height) + 20px),
  'navbar-shadow': 0 10px 20px -8px oklch(0% 0 0 / 50%),
  'navbar-title-color': var(--sakura-color-text-deep),
  'navbar-item-color': var(--sakura-color-text),
  // --------------- Footer ---------------
  'footer-height': 140px,
  // --------------- Card ---------------
  'card-bg': var(--sakura-color-background),
  'card-shadow': 0px 20px 26px oklch(33% 0.0014 17.23 / 30%),
  // --------------- PostCard ---------------
  'post-card-height': 250px,
  'post-card-bg': var(--sakura-card-bg),
  'post-card-img-width': 55%,
  'post-card-rd': var(--sakura-radius),
  'post-card-font-size': 1.17em,
  // --------------- PostNavigation ---------------
  'post-nav-height': 150px,
  // --------------- Aside ---------------
  'aside-width': var(--va-sidebar-width),
  // --------------- Sidebar ---------------
  'sidebar-width': var(--va-sidebar-width),
  'sidebar-marker-height': 2px,
  'sidebar-bg': var(--sakura-color-background),
  'sidebar-offset': var(--sakura-sidebar-width),
  // --------------- SakuraTimeLine ---------------
  'timeline-color': var(--sakura-color-primary),
  'timeline-text-color': var(--sakura-color-primary),
  'timeline-height': 30px,
  // --------------- Glitch Text ---------------
  'color-glitch-before': oklch(66% 0.2 32.5),
  'color-glitch-after': oklch(66% 0.2 252),
  // --------------- Comment ---------------
  'comment-bg-url': url('../assets/comment-bg.png'),
) !default;
$common: map.merge((), $common);

$light: (
  'color-text-muted': oklch(70% 0 0),
  'color-text': oklch(55.55% 0 0),
  'color-text-deep': oklch(37.15% 0 0),
  'color-border': oklch(94.91% 0 0),
  'color-icon': oklch(100% 0 0),
  // --------------- Navbar ---------------
  'navbar-bg': oklch(100% 0 0 / 98%),
) !default;
$light: map.merge((), $light);

$dark: (
  // --------------- Text ---------------
  'color-text-muted': oklch(70% 0.0044 247.87),
  'color-text': oklch(92.22% 0.0044 247.87),
  'color-text-deep': oklch(100% 0 0),
  'color-border': oklch(17.76% 0 0),
  'color-icon': oklch(100% 0 0),
  // --------------- Navbar ---------------
  'navbar-bg': var(--va-c-bg-alt)
) !default;
$dark: map.merge((), $dark);