/*
  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-demo1 {
  /*
    ## Contextual colors
  */
  /* Globals */
  --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;

  --background-color_primary: var(--text-color_high-contrast);
  --background-color_secondary: 249, 249, 252;
  --background-color_tertiary: 205, 215, 248;

  /* States */
  --color-state-happening-now: 11, 39, 107;
  --color-state-happening-now_light: var(--text-color_quaternary);

  --color-state-due-today: 19, 116, 243;
  --color-state-due-today_light: 207, 237, 255;

  --color-state-completed: 36, 175, 155;
  --color-state-completed_light: 209, 234, 230;

  --color-state-disabled: 157, 160, 169;
  --color-state-disabled_light: 233, 233, 233;

  --color-state-important: 239, 87, 73;

  --color-state-in-the-future: 87, 96, 177;
  --color-state-in-the-future_light: 224, 232, 255;

  /* Shadows */
  --shadow-color_low: rgba(var(--color-state-in-the-future), 0.1);
  --shadow-color_medium: rgba(var(--color-state-in-the-future), 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(--text-color_secondary);
  --button-text: var(--text-color_high-contrast);

  --button-background-hover: var(--text-color_primary);
  --button-text-hover: var(--button-text);

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

  --buttonHollow-border-hover: var(--buttonHollow-border);
  --buttonHollow-text-hover: var(--button-text-hover);

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

  /* ** Icon ** */
  --icon-fill_primary: var(--color-state-happening-now);
  --icon-fill_secondary: var(--text-color_secondary);
  --icon-fill_tertiary: var(--text-color_quaternary);

  /* ** Navigation ** */
  --navigation-background: var(--text-color_primary);

  /* ** NavigationIcon ** */
  --navigationIcon-fill: 157, 177, 226;
  --navigationIcon-fill-selected: var(--text-color_high-contrast);
  --navigationIcon-background-selected: 87, 96, 177;

  /* ** Spinner ** */
  --spinnerCircle-background_1: var(--text-color_primary);
  --spinnerCircle-background_2: var(--text-color_quaternary);
  --spinnerCircle-background_3: var(--navigationIcon-fill);
  --spinnerCircle-background_4: var(--background-color_tertiary);

  /* ** Tabs ** */
  --tabs-background: var(--color-state-in-the-future_light);
  --tabs-text: var(--text-color_primary);
  --tabs-background-selected: var(--text-color_secondary);
  --tabs-text-selected: var(--text-color_high-contrast);

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

  /* ** Profile Card ** */
  --profileCard-text-color_primary: 255, 255, 255;

  /* ** TextField ** */
  --text-field-text: var(--text-color_secondary);
  --text-field-border: var(--background-color_tertiary);

  /* ** Select ** */
  --select-text: var(--text-color_primary);
  --select-placeholder-text: rgba(var(--text-color_primary), 0.75);
  --select-background: var(--color-state-in-the-future_light);

  /* ** 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(--color-state-important);
  --dateCell-event-dot-other-month-fill: 152, 162, 179;

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

  /* ** Announcement List ** */
  --announcementListItem-description-text-color: 105, 109, 111;
  --announcementListItem-selected-background: 244, 245, 245;
}

@media screen and (prefers-color-scheme: dark) {
  /*
    --------------------------------------------------------------------
    WIP
    --------------------------------------------------------------------
  */
  .theme-demo1 {
    /* Globals */
    --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;

    --background-color_primary: 12, 13, 41;
    --background-color_secondary: 25, 26, 67;
    --background-color_tertiary: 58, 80, 130;

    /* States */
    --color-state-happening-now: 49, 54, 132;
    --color-state-happening-now_light: 76, 81, 180;

    --color-state-due-today: 42, 86, 198;
    --color-state-due-today_light: 31, 38, 97;

    --color-state-completed: 44, 201, 182;
    --color-state-completed_light: 0, 79, 84;

    --color-state-disabled: 157, 160, 169;
    --color-state-disabled_light: 73, 70, 89;

    --color-state-important: 239, 87, 73;

    --color-state-in-the-future: 87, 96, 177;
    --color-state-in-the-future_light: 47, 46, 95;

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

    /* **** Components **** */
    /* ** Button ** */
    --button-background-hover: 205, 207, 255;

    /* Button--hollow */
    --buttonHollow-border-hover: var(--button-background-hover);

    /* ** Card ** */
    --card-background: 33, 34, 80;

    /* ** Icon ** */
    --icon-fill_primary: var(--text-color_secondary);

    /* ** Navigation ** */
    --navigation-background: 37, 38, 91;

    /* ** NavigationIcon ** */
    --navigationIcon-fill-selected: 255, 255, 255;
    --navigationIcon-background-selected: 52, 53, 117;

    /* ** Tabs ** */
    --tabs-background: 40, 41, 95;

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

    /* ** Profile Card ** */
    --profileCard-text-color_primary: 255, 255, 255;

    /* ** Select ** */
    --select-background: 40, 41, 95;

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

    /* ** Announcement List ** */
    --announcementListItem-description-text-color: 105, 109, 111;
    --announcementListItem-selected-background: 244, 245, 245;
  }
}