/*
 * Colors
 * Brand
 * Light mode
 * Dark mode
 */

@use 'sass:map';
@use '../abstracts/variables';

:root {
  /**
   * @tokens Colors
   * @presenter Color
   */
  // Brand
  @each $name, $color in variables.$pkt-colors {
    --pkt-color-#{$name}: #{$color};
  }

  // Semantic — lys modus
  @each $name, $color in variables.$pkt-semantic-colors {
    --pkt-color-#{$name}: #{$color};
  }

  // Deprecated colors
  @each $name, $color in variables.$colors {
    --#{$name}: #{$color};
  }

  // Semantic — dark mode. Kun tokens som faktisk skiller seg fra light mode
  &[data-mode='dark'],
  [data-mode='dark'] {
    color-scheme: dark;

    @each $name, $color in variables.$pkt-semantic-colors-dark {
      @if $color != map.get(variables.$pkt-semantic-colors, $name) {
        --pkt-color-#{$name}: #{$color};
      }
    }
  }

  // Semantic — lys modus inne i mørk modus
  &[data-mode='light'],
  [data-mode='light'] {
    color-scheme: light;

    @each $name, $color in variables.$pkt-semantic-colors {
      @if $color != map.get(variables.$pkt-semantic-colors-dark, $name) {
        --pkt-color-#{$name}: #{$color};
      }
    }
  }
}