/**
 * Theme
 *
 * Adjustable theme settings.
 *
 *============================================================================*/



/* Theme
 *============================================================================*/

$colors-themes: (
  primary: (
    theme    : #3f51b5,
    primary  : rgba(255,255,255,1),
    secondary: rgba(255,255,255,.8),
    tertiary : rgba(255,255,255,.15)
  ),
  accent: (
    theme    : #ff4081,
    primary  : rgba(255,255,255,1),
    secondary: rgba(255,255,255,.8),
    tertiary : rgba(255,255,255,.15)
  ),
  warn: (
    theme    : #dc143c,
    primary  : rgba(255,255,255,1),
    secondary: rgba(255,255,255,.8),
    tertiary : rgba(255,255,255,.15)
  ),
  light: (
    theme    : #f2f2f2,
    primary  : rgba(0,0,0,.9),
    secondary: rgba(0,0,0,.7),
    tertiary : rgba(0,0,0,.15)
  ),
  dark: (
    theme    : #212121,
    primary  : rgba(255,255,255,1),
    secondary: rgba(255,255,255,.8),
    tertiary : rgba(255,255,255,.15)
  )
);

$fonts: (
  primary: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
);



/* Generating CSS variables in :root
 *============================================================================*/

:root {
  @each $group-name, $group in $colors-themes {
    @each $color-name, $color-value in $group {
      --#{$group-name}-#{$color-name}: #{$color-value};
    }
  }
  @each $font-name, $font-value in $fonts {
    --font-#{$font-name}: #{$font-value};
  }
}



/* Generating theme classes
 *============================================================================*/

@each $group-name, $group in $colors-themes {
  .#{$group-name} {
    --theme    : var(--#{$group-name}-theme);
    --primary  : var(--#{$group-name}-primary);
    --secondary: var(--#{$group-name}-secondary);
    --tertiary : var(--#{$group-name}-tertiary);
  }
}