/*
  For more information on Themes read the docs: /docs/README.md#themes-and-client-builds
*/

/*
  # Design tokens

  Theme name system: theme-[theme-name-slug]
  Where `theme-name-slug` is the same one used on the environment variable PUBLIC_APP_THEME
*/
.theme-default {
  /*
    ## Contextual colors
  */

  /*
   * Design system colors; each of these colors corresponds with a color
   * in the design system. These colors are the basic building blocks used
   * to create the theme.
   */

  --text-color_primary: 24, 32, 122;
  --text-color_secondary: 92, 101, 242;
  --text-color_tertiary: 75, 97, 149;
  --text-color_quaternary: 126, 153, 222;
  --text-color_high-contrast: 255, 255, 255;

  --button-color_primary: 92, 101, 242;
  --button-color_secondary: 24, 32, 122;
  --button-color_tertiary: 92, 101, 242;
  --button-color_disabled: 205, 215, 248;

  --icon-color_primary: 24, 32, 122;
  --icon-color_secondary: 92, 101, 242;
  --icon-color_tertiary: 126, 153, 222;

  --background-color_primary: 255, 255, 255;
  --background-color_cell: 255, 255, 255;
  --background-color_primary-variant: 249, 249, 252;

  --navigation_background-color: 24, 32, 112;
  --navigation_button-color: 157, 177, 226;
  --navigation_button-color_selected: 255, 255, 255;
  --navigation_button-mobile-color_selected: 255, 255, 255;
  --navigation_button_background-color_selected: 87, 96, 177;

  --tab-panel_background-color: 224, 232, 255;
  --tab-panel_background-color_selected: 92, 101, 242;
  --tab-panel_foreground-color: 24, 32, 122;
  --tab-panel_foreground-color_selected: 255, 255, 255;

  --divider-color_primary: 205, 215, 248;

  --alert-color_dark: 239, 87, 73;

  --today-color_dark: 19, 116, 243;
  --today-color_light: 207, 237, 255;

  --success-color_dark: 36, 175, 155;
  --success-color_light: 209, 234, 230;

  --future-color_dark: 87, 96, 177;
  --future-color_light: 224, 232, 255;

  --canceled-color_dark: 157, 160, 169;
  --canceled-color_light: 233, 233, 233;

  --now-color_dark: 24, 32, 122;
  --now-color_light: 126, 153, 222;

  /*
   * Colors defined in the designs, but not as a design system color
   */

  /* Shadows */
  --shadow-color_low: rgba(var(--future-color_dark), 0.1);
  --shadow-color_medium: rgba(var(--future-color_dark), 0.12);
  --shadow-color_high: var(--shadow-color_medium);

  /*
    ### Components
    IMPORTANT: not ALL components need contextual colors. ONLY those
    that were agreed between the whole team (designers, developers, etc).
    Please check with the team before adding new ones to this list, otherwise 
    please use the global variables above they are also available as global 
    css classes, see main.scss:354

    ### Naming system:
    Split into:
    [componentName]-[whereItsUsed]-[state]_[variant]

    componentName: Same as the react component function name

    whereItsUsed: For example: background, border, text

    state: Optional. Represents a moment in time. For example: Is... disabled, completed, priority, etc

    variant: Optional. Always prefixed with an `_` and can be chained.
  */

  /* ** Button ** */
  --button-background: var(--button-color_primary);
  --button-text: var(--text-color_high-contrast);

  --button-background-hover: var(--button-color_secondary);
  --button-text-hover: var(--text-color_high-contrast);

  /* ** Button--hollow */
  --buttonHollow-border: var(--button-color_secondary);
  --buttonHollow-text: var(--button-color_secondary);

  --buttonHollow-border-hover: var(--button-color_secondary);
  --buttonHollow-text-hover: var(--text-color_high-contrast);

  /* ** Card ** */
  --card-background: var(--background-color_cell);

  /* ** Spinner ** */
  --spinnerCircle-background_1: var(--text-color_primary);
  --spinnerCircle-background_2: var(--text-color_quaternary);
  --spinnerCircle-background_3: var(--navigation_button-color);
  --spinnerCircle-background_4: var(--divider-color_primary);

  /* ** Top Cell ** */
  --topcell-course-background: var(--now-color_dark);
  --topcell-course-title: var(--text-color_high-contrast);
  --topcell-course-subtitle: var(--text-color_quaternary);

  /* ** Profile Card ** */
  --profileCard-text-color_primary: var(--text-color_high-contrast);

  /* ** TextField ** */
  --text-field-text: var(--text-color_secondary);
  --text-field-border: var(--divider-color_primary);

  /* ** Select ** */
  --select-text: var(--text-color_primary);
  --select-placeholder-text: rgba(var(--text-color_primary), 0.75);
  --select-background: var(--tab-panel_background-color);

  /* ** DatePicker ** */
  --dateCell-today-background: 218, 220, 222;
  --dateCell-selected-background: var(--text-color_secondary);
  --dateCell-selected-text: var(--text-color_high-contrast);
  --dateCell-in-range-background: 242, 244, 247;
  --dateCell-event-dot-fill: var(--text-color_secondary);
  --dateCell-event-dot-fill-selected: var(--text-color_high-contrast);
  --dateCell-priority-event-dot-fill: var(--alert-color_dark);

  /* ** Overlay ** */
  --overlay-background: var(--text-color_primary);

  /* ** Login Logo ** */
  --loginLogo-scale: 1;

  /* ** Login Logo ** */
  --navLogo-horizontalPadding-scale: 2px;
}

@media screen and (prefers-color-scheme: dark) {
  .theme-default {
    --text-color_primary: 252, 251, 246;
    --text-color_secondary: 131, 138, 255;
    --text-color_tertiary: 172, 191, 238;
    --text-color_quaternary: 154, 182, 252;
    --text-color_high-contrast: 14, 15, 45;

    --button-color_primary: 131, 138, 255;
    --button-color_secondary: 255, 255, 255;
    --button-color_tertiary: 131, 138, 255;
    --button-color_disabled: 205, 125, 248;

    --icon-color_primary: 131, 138, 255;
    --icon-color_secondary: 44, 201, 182;
    --icon-color_tertiary: 154, 182, 252;

    --background-color_primary: 12, 13, 41;
    --background-color_cell: 33, 34, 80;
    --background-color_primary-variant: 25, 26, 67;

    --navigation_background-color: 37, 38, 91;
    --navigation_button-color: 157, 177, 226;
    --navigation_button-color_selected: 255, 255, 255;
    --navigation_button-mobile-color_selected: 255, 255, 255;
    --navigation_button_background-color_selected: 87, 96, 177;

    --tab-panel_background-color: 40, 41, 95;
    --tab-panel_background-color_selected: 131, 138, 255;
    --tab-panel_foreground-color: 255, 255, 255;
    --tab-panel_foreground-color_selected: 12, 13, 41;

    --divider-color_primary: 40, 42, 106;

    --alert-color_dark: 239, 87, 73;

    --today-color_dark: 42, 86, 198;
    --today-color_light: 31, 38, 97;

    --success-color_dark: 44, 201, 182;
    --success-color_light: 0, 79, 84;

    --future-color_dark: 87, 96, 177;
    --future-color_light: 47, 46, 95;

    --canceled-color_dark: 157, 160, 169;
    --canceled-color_light: 73, 70, 89;

    --now-color_dark: 49, 54, 132;
    --now-color_light: 76, 81, 180;

    /* Shadows */
    --shadow-color_low: rgba(var(--background-color_primary), 0.3);
    --shadow-color_medium: rgba(var(--background-color_primary), 0.6);
    --shadow-color_high: var(--shadow-color_medium);

    /* ** Top Cell ** */
    --topcell-course-title: var(--text-color_primary);

    /* ** Profile Card ** */
    --profileCard-text-color_primary: var(--text-color_primary);

    /* ** DatePicker ** */
    --dateCell-today-background: var(--now-color_dark);
    --dateCell-in-range-background: var(--background-color_primary);
    --dateCell-event-dot-fill-selected: var(--text-color_primary);
  }
}