/*---------------------
COLOR & STYLE
-----------------------*/

/* In QAB 310 this module is Color & Style, not color-only.
   "Style" means the visual skin of elements: background, text color,
   border visibility/color, outline, focus rings, and similar surface effects.
   Structural component form, sizing, and layout belong in later modules such as
   06-components.css unless a local override is explicitly needed. */

/**--------
Color Tokens
--------**/

:root {
  /*hues*/
  --color-hue-100: 5;
  --color-hue-200: 34;
  --color-hue-300: 76;
  --color-hue-400: 144; /*default*/
  --color-hue-500: 199;
  --color-hue-600: 233;
  --color-hue-700: 322;

  /*semantic hues*/
  --color-hue-cool-grey: var(--color-hue-500);
  --color-hue-warm-grey: var(--color-hue-700);
  --color-hue-primary: var(--color-hue-400);
  --color-hue-secondary-400: var(--color-hue-500);
  --color-hue-secondary-500: var(--color-hue-600);
  --color-hue-accent-100: var(--color-hue-300);
  --color-hue-accent-400: var(--color-hue-700);
  --color-hue-accent-700: var(--color-hue-200);

  /*base colors*/
  --color-base-100: hsl(var(--color-hue-100) 89% 42%);
  --color-base-200: hsl(var(--color-hue-200) 89% 42%);
  --color-base-300: hsl(var(--color-hue-300) 89% 42%);
  --color-base-400: hsl(var(--color-hue-400) 89% 42%); /*default*/
  --color-base-500: hsl(var(--color-hue-500) 89% 42%);
  --color-base-600: hsl(var(--color-hue-600) 89% 42%);
  --color-base-700: hsl(var(--color-hue-700) 89% 42%);
  --color-base-black: hsl(var(--color-hue-primary) 97% 1%);
  --color-base-white: hsl(var(--color-hue-primary) 3% 99%);

  /*cool grays*/
  --color-gray-cool-100: hsl(var(--color-hue-cool-grey) 3% 97%); /*cool sub white*/
  --color-gray-cool-200: hsl(var(--color-hue-cool-grey) 13% 94%);
  --color-gray-cool-300: hsl(var(--color-hue-cool-grey) 13% 76%);
  --color-gray-cool-400: hsl(var(--color-hue-cool-grey) 13% 55%); /*default*/
  --color-gray-cool-500: hsl(var(--color-hue-cool-grey) 13% 34%);
  --color-gray-cool-600: hsl(var(--color-hue-cool-grey) 34% 21%);
  --color-gray-cool-700: hsl(var(--color-hue-cool-grey) 34% 8%); /*cool sub black*/

  /*warm grays*/
  --color-gray-warm-100: hsl(var(--color-hue-warm-grey) 3% 97%); /*warm sub white*/
  --color-gray-warm-200: hsl(var(--color-hue-warm-grey) 3% 94%);
  --color-gray-warm-300: hsl(var(--color-hue-warm-grey) 3% 76%);
  --color-gray-warm-400: hsl(var(--color-hue-warm-grey) 5% 55%); /*default*/
  --color-gray-warm-500: hsl(var(--color-hue-warm-grey) 5% 34%);
  --color-gray-warm-600: hsl(var(--color-hue-warm-grey) 13% 21%);
  --color-gray-warm-700: hsl(var(--color-hue-warm-grey) 21% 8%); /*warm sub black*/

  /*primary color*/
  --color-primary-100: hsl(var(--color-hue-primary) 34% 89%);
  --color-primary-200: hsl(var(--color-hue-primary) 34% 76%);
  --color-primary-300: hsl(var(--color-hue-primary) 34% 68%);
  --color-primary-400: hsl(var(--color-hue-primary) 34% 55%); /*default*/
  --color-primary-500: hsl(var(--color-hue-primary) 34% 42%);
  --color-primary-600: hsl(var(--color-hue-primary) 55% 21%);
  --color-primary-700: hsl(var(--color-hue-primary) 55% 13%);

  /*
secondary colors and accent colors use the decimal digit for range: 
x10 - x70, with x40 the default
*/

  /*secondary colors*/
  --color-secondary-410: hsl(var(--color-hue-secondary-400) 34% 89%);
  --color-secondary-420: hsl(var(--color-hue-secondary-400) 55% 76%);
  --color-secondary-430: hsl(var(--color-hue-secondary-400) 76% 55%);
  --color-secondary-440: hsl(var(--color-hue-secondary-400) 89% 42%);
  --color-secondary-450: hsl(var(--color-hue-secondary-400) 89% 34%);
  --color-secondary-460: hsl(var(--color-hue-secondary-400) 89% 21%);
  --color-secondary-470: hsl(var(--color-hue-secondary-400) 89% 13%);

  --color-secondary-540: hsl(var(--color-hue-secondary-500) 76% 55%);

  /*accent colors*/
  --color-accent-140: hsl(var(--color-hue-100) 76% 42%);
  --color-accent-240: hsl(var(--color-hue-200) 97% 42%);
  --color-accent-340: hsl(var(--color-hue-300) 76% 42%);
  --color-accent-440: hsl(var(--color-hue-400) 89% 42%);
  --color-accent-740: hsl(var(--color-hue-700) 97% 42%);

  /*semantic colors
  semantic colors, too may be indexed with the 100 - 700 numbers.
  In that case again a 400 means: the standard for this use.
  */

  --color-bckg-desktop-400: var(--color-gray-cool-200);

  --color-flag-dev-400: var(--color-accent-240);
}

/**--------
Color Backgrounds
--------**/

body {
  background: var(--color-gray-cool-100);
}

button {
  background: var(--color-gray-cool-200);
}

.btn {
  background: var(--color-primary-100);
}

button:hover,
button:active {
  background: var(--color-accent-340);
}

.btn:hover,
.btn:active {
  background: var(--color-primary-200);
}

.bdg {
  background: var(--color-accent-340);
}

.dev {
  background: var(--color-accent-240);
}

/**--------
Color Typography
--------**/

body {
  color: var(--color-gray-cool-600);
}

.btn {
  color: var(--color-primary-600);
}

.dev,
.bdg {
  color: var(--color-gray-cool-100);
}

/**--------
Color Skins
--------**/

/**--------
Color Darkmode
--------**/

/**--------
Border & Outline
--------**/

.btn {
  border: 1px solid var(--color-primary-200);
}