:root {

  --primary: #231f1e;
  --primary-rgb: 35, 31, 30;

  --secondary: #fdd739;
  --secondary-rgb: 253, 215, 57;

  --tertiary: #272b2f;
  --tertiary-rgb: 39, 43, 47;

  --body: #ffffff;
  --body-rgb: 255, 255, 255;
  --body-inverted: #212529;
  --body-inverted-rgb: 33, 37, 41;

  --body-bg: #ffffff;
  --body-bg-rgb: 255, 255, 255;
  --body-bg-inverted: #212529;
  --body-bg-inverted-rgb: 33, 37, 41;

  --text: #181818;
  --text-rgb: 24, 24, 24;
  --text-active: #040404;
  --text-active-rgb: 4, 4, 4;

  --text-inverted: #eaeaea;
  --text-inverted-rgb: 234, 234, 234;
  --text-inverted-active: #fefefe;
  --text-inverted-active-rgb: 254, 254, 254;

  --border: #dee2e6;
  --border-rgb: 222, 226, 230;
  --border-inverted: #495057;
  --border-inverted-rgb: 73, 80, 87;

}

:root,
[data-bs-theme=light] {

  --as-primary: var(--primary);
  --as-primary-rgb: var(--primary-rgb);
  --as-primary-subtle: rgba(var(--as-primary-rgb), 0.4);

  --as-secondary: var(--secondary);
  --as-secondary-rgb: var(--secondary-rgb);
  --as-secondary-subtle: rgba(var(--as-secondary-rgb), 0.3);
  --as-secondary-subtle-rgb: var(--as-secondary-rgb);

  --as-tertiary: var(--tertiary);
  --as-tertiary-rgb: var(--tertiary-rgb);
  --as-tertiary-subtle: rgba(var(--as-tertiary-rgb), 0.5);
  --as-tertiary-subtle-rgb: var(--as-tertiary-rgb);

  --as-body: var(--body);
  --as-body-rgb: var(--body-rgb);
  --as-body-bg: var(--body-bg);

  --as-card-cap-bg: var(--as-secondary); 
  --as-card-cap-color: var(--as-text); 

  --as-text: var(--text);
  --as-text-rgb: var(--text-rgb);
  --as-text-active: var(--text-active);
  --as-text-active-rgb: var(--text-active-rgb);

  --as-text-inverted: var(--text-inverted);
  --as-text-inverted-rgb: var(--text-inverted-rgb);
  --as-text-inverted-active: var(--text-inverted-active);
  --as-text-inverted-active-rgb: var(--text-inverted-active-rgb);

  --as-link: rgba(var(--primary-rgb), 0.9);
  --as-link-active: var(--primary);

  --as-border: rgba(var(--border-inverted-rgb), 0.3);
  --as-border-active: rgba(var(--border-inverted-rgb), 0.3);
  --as-box-shadow: 0 0 0 0.1rem var(--as-border);

  --as-button: var(--as-text);
  --as-button-bg: rgba(var(--as-secondary-rgb), 0.7);
  --as-button-active: var(--as-text);
  --as-button-active-bg: var(--as-secondary);
  
  --as-header-height: 4rem;
  --as-logo-height: 3rem;

}

[data-bs-theme=dark] {

  --as-primary: var(--primary);
  --as-primary-rgb: var(--primary-rgb);
  --as-primary-subtle: rgba(var(--as-primary-rgb), 0.8);

  --as-secondary: var(--secondary);
  --as-secondary-rgb: var(--secondary-rgb);
  --as-secondary-subtle: rgba(var(--as-secondary-rgb), 0.3);

  --as-tertiary: var(--tertiary);
  --as-tertiary-rgb: var(--tertiary-rgb);
  --as-tertiary-subtle: rgba(var(--as-tertiary-rgb), 0.3);

  --as-body: var(--body-inverted);
  --as-body-rgb: var(--body-inverted-rgb);
  --as-body-bg: rgba(var(--body-rgb), 0.1);

  --as-card-cap-bg: var(--as-secondary); 
  --as-card-cap-color: var(--text); 

  --as-text: var(--text-inverted);
  --as-text-rgb: var(--text-inverted-rgb);
  --as-text-active: var(--text-inverted-active);
  --as-text-active-rgb: var(--text-inverted-active-rgb);

  --as-text-inverted: var(--text);
  --as-text-inverted-rgb: var(--text-rgb);
  --as-text-inverted-active: var(--text-active);
  --as-text-inverted-active-rgb: var(--text-active-rgb);

  --as-link: rgba(var(--as-text-rgb), 0.9);
  --as-link-rgb: var(--as-text-rgb);
  --as-link-active: var(--primary);

  --as-border: rgba(var(--border-inverted-rgb), 0.7);
  --as-border-active: rgba(var(--border-inverted-rgb), 0.7);

  --as-button: var(--as-text-inverted);
  --as-button-bg: rgba(var(--as-secondary-rgb), 0.7);
  --as-button-active: var(--as-text-inverted);
  --as-button-active-bg: var(--as-secondary);

}