/*
* Description: default style for mode system
* Author: C Studio
* Version: 1.0.0
* Update: 26-03-20
*
* Semantic tokens — backgrounds, text, borders — aligned with legacy roots.css
* project-base mappings where applicable.
*/

:root {
  /*–––––––––––––––––––––––––––––––––––––––––*/
  /*BTN*/
  /*BTN--PRIMARY*/
  --btn-bg-primary: var(--primary);
  --btn-color-primary: var(--light);
  --btn-bg-primary-hover: var(--primary-d);
  --btn-color-primary-hover: var(--btn-color-primary);
  --btn-border-primary-outline: var(--primary);
  --btn-color-primary-outline: var(--primary);
  --btn-border-primary-outline-hover: var(--btn-bg-primary-hover);
  --btn-color-primary-outline-hover: var(--btn-color-primary-hover);
  --btn-icon-primary: var(--btn-color-primary);
  --btn-icon-primary-hover: var(--btn-color-primary);
  --btn-outline-bg-primary: transparent;

  /*BTN--SECONDARY*/
  --btn-bg-secondary: var(--secondary);
  --btn-color-secondary: var(--light);
  --btn-bg-secondary-hover: var(--secondary-d);
  --btn-color-secondary-hover: var(--light);
  --btn-border-secondary-outline: var(--btn-bg-secondary);
  --btn-color-secondary-outline: var(--btn-bg-secondary);
  --btn-border-secondary-outline-hover: var(--btn-bg-secondary-hover);
  --btn-color-secondary-outline-hover: var(--btn-color-secondary-hover);
  --btn-icon-secondary: var(--btn-color-secondary);
  --btn-icon-secondary-hover: var(--btn-color-secondary-hover);
  --btn-outline-bg-secondary: var(--btn-bg-secondary-hover);

  /*BTN--DARK*/
  --btn-bg-dark: var(--dark);
  --btn-color-dark: var(--light);
  --btn-bg-dark-hover: var(--dark-l);
  --btn-color-dark-hover: var(--btn-color-dark);
  --btn-border-dark-outline: var(--dark);
  --btn-color-dark-outline: var(--dark);
  --btn-border-dark-outline-hover: var(--btn-bg-dark-hover);
  --btn-color-dark-outline-hover: var(--btn-color-dark-hover);
  --btn-icon-dark: var(--btn-color-dark);
  --btn-icon-dark-hover: var(--light);
  --btn-outline-bg-dark: var(--dark-o-1);

  /*BTN--LIGHT*/
  --btn-bg-light: var(--light);
  --btn-color-light: var(--dark);
  --btn-bg-light-hover: var(--neutral-l);
  --btn-color-light-hover: var(--dark);
  --btn-border-light-outline: var(--light);
  --btn-color-light-outline: var(--light);
  --btn-border-light-outline-hover: var(--btn-bg-light-hover);
  --btn-color-light-outline-hover: var(--btn-color-light-hover);
  --btn-icon-light: var(--btn-color-light);
  --btn-icon-light-hover: var(--dark);
  --btn-outline-bg-light: var(--light-o-1);

  /*–––––––––––––––––––––––––––––––––––––––––*/
  /*SCROLLBAR — FTP roots.css (same refs for light/dark tracks) */
  --scrollbar-track-light: var(--opacity-light-hover);
  --scrollbar-track-dark: var(--opacity-light-hover);
  --scrollbar-active-light: var(--opacity-light-active);
  --scrollbar-active-dark: var(--opacity-light-active);

  /*SELECTION — legacy roots */
  --selection-bg-light: var(--primary);
  --selection-color-light: var(--dark);
  --selection-bg-dark: var(--primary);
  --selection-color-dark: var(--dark);

  /*–––––––––––––––––––––––––––––––––––––––––*/
  /*DEFAULT*/
  --default-reverse-light: var(--light);
  --default-reverse-dark: var(--dark);
  --default-hover-bg-light: var(--dark-o-1);
  --default-hover-bg-dark: var(--light-o-1);
  --default-check-light: var(--dark);
  --default-check-dark: var(--light);

  /*ACTIVE*/
  --active-light: var(--secondary);
  --active-color-light: var(--light);
  --active-light-hover: var(--secondary-d);
  --active-dark: var(--secondary);
  --active-color-dark: var(--dark);
  --active-dark-hover: var(--secondary-d);

  /*HIGHLIGHT*/
  --highlight-color-light: var(--light);
  --highlight-bg-light: var(--primary);
  --highlight-bg-light-hover: var(--primary);
  --highlight-color-light-hover: var(--light);
  --highlight-color-dark: var(--dark);
  --highlight-bg-dark: var(--secondary);
  --highlight-bg-dark-hover: var(--secondary-l);
  --highlight-color-dark-hover: var(--dark);

  /* Hourly sky accent — .c-time, custom.css [data-hour]; defaults when data-hour absent */
  --highlight: var(--primary);
  --highlight-light: var(--primary-l);
  --highlight-dark: var(--dark);
  --highlight-active: var(--primary);
  --highlight-opacity: var(--primary-o-3);

  /*–––––––––––––––––––––––––––––––––––––––––*/
  /*LOADER*/
  --loader-bg: var(--highlight-bg-dark);
  --loader-color: var(--highlight-color-dark);

  /*HEADER — legacy roots: header chrome = primary */
  --header-bg-light: var(--primary);
  --header-bg-dark: var(--primary);
  --header-color-light: var(--dark);
  --header-color-dark: var(--light);

  /*TOPBAR*/
  --topbar-bg-light: var(--primary);
  --topbar-bg-dark: var(--primary);
  --topbar-color-light: var(--dark);
  --topbar-color-dark: var(--light);

  /*BTN/CONTROLS*/
  --hyperlink-color-light: var(--accent01);
  --hyperlink-color-dark: var(--accent01);

  --control-color-light: var(--dark);
  --control-bg-light: var(--light-d);
  --control-color-dark: var(--light);
  --control-bg-dark: var(--dark-l);

  /*INPUT*/
  --placeholder-light: var(--neutral-d);
  --placeholder-dark: var(--neutral);
  --label-color-light: var(--neutral-d);
  --label-color-dark: var(--neutral);

  /*ICON*/
  --icon-fill-light: var(--dark);
  --icon-fill-dark: var(--light);

  /*LIST*/
  --list-highlight-bg-light: var(--secondary-l);
  --list-highlight-color-light: var(--dark);
  --list-highlight-bg-dark: var(--accent01);
  --list-highlight-color-dark: var(--dark);

  --list-border-color-light: var(--dark-o-4);
  --list-border-color-dark: var(--light-o-4);

  --list-icon-check-light: var(--dark);
  --list-icon-check-dark: var(--light);

  /*BORDER — legacy roots border-color-* */
  --border-color-light: var(--dark-o-3);
  --border-opacity-light: var(--dark-o-5);
  --border-color-light-focus: var(--dark-o-1);
  --border-color-light-active: var(--dark);
  --border-color-dark: var(--light-o-3);
  --border-opacity-dark: var(--light-o-5);
  --border-color-dark-focus: var(--light-o-1);
  --border-color-dark-active: var(--light);

  /*TEASER*/
  --teaser-bg-light: var(--dark-o-1);
  --teaser-bg-dark: var(--light-o-1);

  /*–––––––––––––––––––––––––––––––––––––––––*/
  /*BODY — legacy roots project-base */
  --body-bg-light: var(--light);
  --body-bg-dark: var(--dark);
  --section-bg-light: var(--sand-d);
  --section-bg-dark: var(--dark-l);
  --footer-bg-light: var(--sand-d);
  --footer-bg-dark: var(--dark);

  --headline-color-light: var(--dark);
  --headline-color-dark: var(--light);
  --copy-color-light: var(--neutral-ed);
  --copy-color-dark: var(--neutral);
  --copy-muted-light: var(--dark-o-2);
  --copy-muted-dark: var(--light-o-2);

  /*TYPE*/
  --type01-light-bg: var(--sand);
  --type02-light-bg: var(--sand-d);
  /* --type03-light-bg: var(--light-d);
  --type04-light-bg: var(--neutral-l); */
  --type01-dark-bg: var(--dark);
  --type02-dark-bg: var(--dark-l);
  /* --type03-dark-bg: var(--dark-d);
  --type04-dark-bg: var(--dark); */

  /*ACCENT*/
  --accent01-light-bg: var(--accent01-el);
  --accent01-light-color: var(--accent01);
  --accent01-dark-bg: var(--accent01-d);
  --accent01-dark-color: var(--accent01);

  --accent02-light-bg: var(--accent02-el);
  --accent02-light-color: var(--accent02);
  --accent02-dark-bg: var(--accent02-d);
  --accent02-dark-color: var(--accent02);

  --accent03-light-bg: var(--accent03-el);
  --accent03-light-color: var(--accent03-d);
  --accent03-dark-bg: var(--accent03-d);
  --accent03-dark-color: var(--accent03);
}