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

:root {
  // 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-primary: 104, 54, 245;
  --zn-accent: 71, 214, 214;

  // Theme Colors
  --zn-color-info: 100, 117, 242;
  --zn-color-warning: 255, 136, 0;
  --zn-color-error: 237, 84, 109;
  --zn-color-success: 43, 192, 145;
  --zn-color-disabled: 181, 181, 181;

  // 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;

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

  // 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);
}

[t="light"], .theme-light {
  // Theme Light
  --zn-panel-opacity: 1;
  --zn-text: 123, 112, 151;
  --zn-text-heading: 56, 39, 104;
  --zn-text-page-title: 52, 52, 52;
  --zn-text-panel-title: 56, 39, 104;
  --zn-body: 248, 247, 251;
  --zn-shadow: 236, 233, 241;
  --zn-panel: 255, 255, 255;
  --zn-panel-secondary: 246 246 246;
  --zn-panel-highlight: 248, 249, 252;
  --zn-panel-highlight-opacity: 1;
  --zn-border-color: 224, 221, 233;
  --zn-input-bg: 248, 247, 251;
  --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: #6836F5;
  }
}

[t="dark"], .theme-dark {
  // Theme Dark
  --zn-body: 20, 22, 27;
  --zn-panel: 33, 34, 41;
  --zn-shadow: 10, 10, 10;
  --zn-panel-secondary: 27, 27, 30;
  --zn-panel-opacity: 1;
  --zn-text: 159, 173, 194;
  --zn-text-heading: 241, 245, 249;
  --zn-text-page-title: 225, 225, 225;
  --zn-text-panel-title: 181, 158, 255;
  --zn-panel-highlight: 25, 27, 32;
  --zn-panel-highlight-opacity: 0.1;
  --zn-border-color: 50, 50, 60;
  --zn-input-bg: 28, 28, 32;
  --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;
}