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

:root {
  --zn-base-px: 8px;
  --zn-base-gap: calc(var(--zn-base-px) * 2);
  --zn-gutter: 2px;
  --zn-default-margin: 0 auto 0 0;
  --zn-icon-size: 20px;
  --zn-button-gutter: 2px;

  --zn-font-family-sans: 'Inter', sans-serif;
  --zn-font-family-serif: 'Roboto Slab', serif;
  --zn-font-family-mono: 'Roboto Mono', monospace;
}

:root, [t="light"], .theme-light {
  --zn-backdrop-color: rgba(0, 0, 0, 0.5);

  --zn-color-text: 33, 33, 33;
  --zn-color-muted-text: 125, 119, 146;

  --zn-color-base: 255, 255, 255;
  --zn-color-body: 248, 247, 252;
  --zn-color-navigation: var(--zn-color-base);
  --zn-color-navigation-hightlight: 248, 249, 252;
  --zn-color-border: 219, 217, 236;
  --zn-color-border-active: 209, 207, 226;
  --zn-color-tab: 236, 235, 249;
  --zn-color-panel: 255, 255, 255;

  --zn-color-primary: 105, 54, 245;
  --zn-color-info: 53, 104, 195;
  --zn-color-success: 98, 177, 121;
  --zn-color-warning: 241, 168, 80;
  --zn-color-error: 236, 68, 91;
  --zn-color-disabled: 181, 181, 181;
}

[t="dark"], .theme-dark {
  --zn-backdrop-color: rgba(0, 0, 0, 0.85);

  --zn-color-text: 215, 215, 215;
  --zn-color-muted-text: 145, 145, 145;

  --zn-color-base: 0, 0, 0;
  --zn-color-body: 23, 23, 23;
  --zn-color-navigation: var(--zn-color-base);
  --zn-color-navigation-hightlight: 10, 10, 10;
  --zn-color-border: 38, 38, 38;
  --zn-color-border-active: 80, 80, 80;
  --zn-color-tab: 5, 5, 5;
  --zn-color-panel: 30, 30, 30;

  --zn-color-primary: 105, 54, 245;
  --zn-color-info: 53, 104, 195;
  --zn-color-success: 98, 177, 121;
  --zn-color-warning: 241, 168, 80;
  --zn-color-error: 236, 68, 91;
  --zn-color-disabled: 181, 181, 181;
}

@media (min-width: 1200px) {
  :root {
    --zn-base-gap: calc(var(--zn-base-px) * 3);
  }
}

@media (min-width: 2500px) {
  :root {
    --zn-default-margin: 0 auto;
  }
}


:root {
  --zn-primary: var(--zn-color-primary);

  // Brand Colors
  --zn-red: 237, 84, 109;
  --zn-blue: 100, 117, 242;
  --zn-green: 43, 192, 145;
  --zn-orange: 255, 136, 0;
  --zn-yellow: 255, 193, 7;
  --zn-indigo: 63, 81, 181;
  --zn-violet: 156, 39, 176;
  --zn-pink: 255, 108, 156;
  --zn-grey: 158, 158, 158;
  --zn-accent: 71, 214, 214;

  // Common Sizes
  --zn-size-bar: 60px;
  --zn-size-tile: 80px;
  --zn-size-sidenav: 320px;
  --zn-size-spanel: 170px;
  --zn-size-mpanel: 320px;
  --zn-size-panel: 360px;
  --zn-size-lside: 460px;

  // Default Opacities
  --zn-bg-opacity: 1;
  --zn-text-opacity: 1;

  --base: 255, 255, 255;
  --inverse-base: 0, 0, 0;
}

.zn-mono {
  font-family: var(--zn-font-family-mono), monospace;
}

.zn-muted {
  color: var(--zn-color-muted-text);
}

.zn-size-xs {
  font-size: var(--zn-font-size-x-small);
}

.zn-size-s {
  font-size: var(--zn-font-size-small);
}

.zn-size-l {
  font-size: var(--zn-font-size-large);
}

.zn-size-xl {
  font-size: var(--zn-font-size-x-large);
}

:root, [t="light"], .theme-light, [t="dark"], .theme-dark {
  --zn-body: var(--zn-color-body);

  --zn-text: var(--zn-color-text);
  --zn-text-heading: var(--zn-color-text);
  --zn-text-page-title: var(--zn-color-text);
  --zn-text-panel-title: var(--zn-color-text);
  --zn-panel: var(--zn-color-panel);

  --zn-border-color: var(--zn-color-border);
  --zn-input-bg: var(--zn-color-body);
}

[t="light"], .theme-light {
  // Theme Light
  --zn-panel-opacity: 1;
  --zn-shadow: 236, 235, 249;

  --zn-panel-secondary: 246 246 246;
  --zn-panel-highlight: 248, 249, 252;
  --zn-panel-highlight-opacity: 1;
  --zn-input-bg-accent: 237, 235, 245;
  --zn-bright-bg: 255, 255, 255;
  --zn-light-text: 123, 112, 151;
  --zn-dark-text: 56, 39, 104;
  --zn-purple-text: 104, 54, 245;

  .zn-primary {
    color: rgb(var(--zn-color-primary));
  }
}

[t="dark"], .theme-dark {
  // Theme Dark
  --zn-shadow: 10, 10, 10;
  --zn-panel-secondary: 27, 27, 30;
  --zn-panel-opacity: 1;
  --zn-panel-highlight: 25, 27, 32;
  --zn-panel-highlight-opacity: 0.1;
  --zn-input-bg-accent: 72, 84, 102;
  --zn-bright-bg: 225, 225, 225;
  --zn-light-text: 173, 163, 192;
  --zn-dark-text: 201, 201, 201;
  --zn-purple-text: 129, 140, 249;
  --zn-accent: 15, 165, 234;

  // Theme Dark Brand Colours
  --zn-primary: 137, 103, 239;

  --base: 0, 0, 0;
  --inverse-base: 255, 255, 255;

  .zn-primary {
    color: #8967ef !important;
  }
}

@each $spacing-key, $spacing-value in variables.$spacing {
  .ml-#{$spacing-key} {
    margin-left: $spacing-value;
  }

  .mr-#{$spacing-key} {
    margin-right: $spacing-value;
  }

  .mt-#{$spacing-key} {
    margin-top: $spacing-value;
  }

  .mb-#{$spacing-key} {
    margin-bottom: $spacing-value;
  }

  .mx-#{$spacing-key} {
    margin-left: $spacing-value;
    margin-right: $spacing-value;
  }

  .my-#{$spacing-key} {
    margin-top: $spacing-value;
    margin-bottom: $spacing-value;
  }

  .m-#{$spacing-key} {
    margin: $spacing-value;
  }
}

.zn-red {
  color: rgb(var(--zn-red));
}

.zn-blue {
  color: rgb(var(--zn-blue));
}

.zn-green {
  color: rgb(var(--zn-green));
}

.zn-orange {
  color: rgb(var(--zn-orange));
}

.zn-yellow {
  color: rgb(var(--zn-yellow));
}

.zn-indigo {
  color: rgb(var(--zn-indigo));
}

.zn-violet {
  color: rgb(var(--zn-violet));
}

.zn-pink {
  color: rgb(var(--zn-pink));
}

.zn-grey {
  color: rgb(var(--zn-grey));
}

.zn-primary {
  color: rgb(var(--zn-primary));
}

.zn-accent {
  color: rgb(var(--zn-accent));
}

.zn-info {
  color: rgb(var(--zn-color-info));
}

.zn-warning {
  color: rgb(var(--zn-color-warning));
}

.zn-error {
  color: rgb(var(--zn-color-error));
}

.zn-success {
  color: rgb(var(--zn-color-success));
}

ul.gap {
  li {
    margin: 5px 0;
  }
}

ul.circle, ul.decimal, ul.disc, ul.square {
  padding: 5px 0 5px 15px;
}

ul.circle {
  list-style-type: circle;
}

ul.decimal {
  list-style-type: decimal;
}

ul.disc {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}