/*

  Global Variables

  Primitives for use in other variables (and generally not used directly)

*/
:root {
  --brand-dark-color: #121329;
  --brand-light-color: #FFF;

  --brand-light-neutral-color: #F1F4F9;
  --brand-mid-neutral-color: #D9E1E7;
  --brand-dark-neutral-color: #AAA;

  --brand-dark-green: #007C85;
  --brand-light-green: #00DEB9;
  --brand-light-mauve: #D3277C;
  --brand-dark-mauve: #A11D5F;
  --brand-light-purple: #6935D3;
  --brand-dark-purple: #3B1487;
  --brand-dark-blue: #1C40CA;
  --brand-light-blue: #009DE6;

  --brand-link-color: #809FB8;
  --brand-tint-color: #2B3441;
  --brand-tint-color2: #FFF1;

  --base-size: 1rem;

  --black_rgb: 0,0,0;
  --white_rgb: 255,255,255;
  --heavy-opacity: 0.05;
  --medium-opacity: 0.5;
  --light-opacity: 0.95;

  --negative-color: #EB3323;
  --neutral-color: #439CE0;
  --positive-color: #64DABB;
}

/*

  Dervied Variables

  Global variables derived from primitive values

*/
:root {
  --quarter-size: calc(var(--base-size) * 0.25);
  --half-size: calc(var(--base-size) * 0.5);
  --three-fifths-size: calc(var(--base-size) * 0.6);
  --three-quarter-size: calc(var(--base-size) * 0.75);
  --four-fifths-size: calc(var(--base-size) * 0.8);
  --standard-size: var(--base-size);
  --double-size: calc(var(--base-size) * 2);
  --triple-size: calc(var(--base-size) * 3);
  --quadruple-size: calc(var(--base-size) * 4);
}

/*

  Default Alias Variables (allowing for light/dark mode)

  Specific context applied to global variables for default usage

  Default is dark mode (regardless of user OS setting, as we go with our brand first),
  but can be set by user via the dark mode toggle icon in the UI

*/
:root {
  --color-mode: 'dark';

  --background-color: var(--brand-dark-color);
  --text-color: var(--brand-light-color);

  --logo-url: url(/assets/images/logo-white.svg);
  --logo-reverse-url: url(/assets/images/logo.svg);
  --logo-ring-url: url(/assets/images/logo-ring.svg);
  --logo-default-url: url(/assets/images/logo.svg); /* For when need to ignore dark/light mode */

  --border-color: var(--brand-light-color);
  --active-border-color: var(--brand-light-green);
  --inactive-border-color: rgb(var(--white_rgb), 0.2);

  --nav-heading-color: var(--brand-light-green);
  --nav-link-color: var(--brand-light-color);
  --nav-background-color: unset;
  --nav-border-color: #2D3440B3; /* Can we drive this from a primitive above? */
  --nav-hovered-link-color: var(--brand-dark-color);
  --nav-hovered-link-background-color: var(--brand-light-color);
  --nav-active-link-color: var(--brand-light-color);
  --nav-active-link-background-color: var(--brand-tint-color);
  --nav-active-border-color: var(--brand-light-green);

  --dialog-background-color: var(--brand-tint-color);
  --tab-background-color: var(--brand-tint-color);
  --toast-background-color: var(--brand-tint-color);
  --panel-background-color: var(--brand-tint-color2);

  --button-background-color: var(--brand-light-green);
  --button-text-color: var(--brand-tint-color);

  --table-header-background-color: var(--brand-tint-color);
  --table-header-text-color: var(--brand-light-color);
  --table-cell-background-color: rgb(var(--white_rgb), 0.1);
  --table-cell-text-color: var(--brand-light-color);
  --table-cell-hovered-background-color: rgb(var(--white_rgb), 0.15);

  --form-input-background-color: rgb(var(--white_rgb), 0.1);
  --form-input-text-color: var(--brand-light-color);
  --form-input-border-color: rgb(var(--white_rgb), 0.15);

  --badge-background: var(--brand-dark-mauve);
  --badge-foreground: var(--text-color);
}


[data-user-color-scheme='light'] {
  --color-mode: 'light';

  --background-color: var(--brand-light-neutral-color);
  --text-color: var(--brand-dark-color);

  --logo-url: url(/assets/images/logo.svg);
  --logo-reverse-url: url(/assets/images/logo-white.svg);

  --border-color: var(--brand-dark-color);

  --nav-heading-color: var(--brand-dark-neutral-color);
  --nav-link-color: var(--brand-light-blue);
  --nav-background-color: var(--brand-mid-neutral-color);
  --nav-hovered-link-color: var(--brand-tint-color);
  --nav-hovered-link-background-color: var(--brand-mid-neutral-color);
  --nav-active-link-color: var(--brand-light-color);
  --nav-active-link-background-color: var(--brand-light-blue);

  --panel-background-color: var(--brand-light-color);

  --table-header-background-color: var(--brand-light-color);
  --table-header-text-color: var(--brand-tint-color);
  --table-cell-background-color: var(--brand-light-color);
  --table-cell-text-color: var(--brand-tint-color);
  --table-cell-hovered-background-color: var(--brand-light-neutral-color);

  --form-input-background-color: rgb(var(--black_rgb), 0.1);
  --form-input-text-color: var(--brand-dark-color);
  --form-input-border-color: rgb(var(--black_rgb), 0.15);
}