@font-face {
  font-family: 'Museo Sans';
  src: url('/assets/fonts/MuseoSans-100.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/assets/fonts/MuseoSans-300.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/assets/fonts/MuseoSans-500.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/assets/fonts/MuseoSans-700.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

* {
  --color-trinckle-blue: #0083a3;
  /* Default root variables */
  --as-font-family-base: 'Museo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  --font-weight-light: 100;
  --font-weight-regular: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --header-height: 5rem;
  --footer-height: 3rem;
  --header-padding-y: 0.5rem;
  --header-padding-x: 1.5rem;
  --default-radius: .5rem;

  /* Colors */
  --color-tr-blue: #0084a4;
  --color-tr-blue-desat: #5397a8;
  --color-tr-grey: #C4C4C4;
  --color-tr-blue-light: #57c3e0;
  --color-tr-grey-light: #9BA0AA;

  --color-bg-primary: rgb(255, 255, 255);
  --color-bg-secondary: rgb(241, 240, 240);
  --color-bg-tertiary: rgb(241, 240, 240);
  --color-text-primary: #444;
  --color-text-secondary: #666;
  --color-accent: #007bff;
  --color-accent-hover: #0056b3;
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-info: #17a2b8;


  --base-hover-bg-col: var(--color-tr-blue-desat);
  --tooltip-bg-col: var(--base-hover-bg-col);
  --icon-btn-hover-bg-col: var(--base-hover-bg-col);

  --button-confirm-color: var(--color-tr-blue);
  --button-confirm-color-hover: var(--color-tr-blue-desat);
  --button-cancel-color: var(--color-tr-grey);
  --button-cancel-color-hover: var(--color-tr-grey-light);

  /* Modal Button Styling */
  --modal-button-padding-x: 1.5rem;
  --modal-button-padding-y: 0.75rem;
  --modal-button-radius: 4px;

  /* Default modal button styling */
  --modal-button-bg-col: var(--color-bg-secondary);
  --modal-button-text-col: var(--color-text-primary);
  --modal-button-hover-bg-col: var(--color-bg-tertiary);

  /* Button variant styling matching existing buttons */
  --button-confirm-bg-col: var(--button-confirm-color);
  --button-confirm-text-col: white;
  --button-confirm-hover-bg-col: var(--button-confirm-color-hover);

  --button-cancel-bg-col: var(--button-cancel-color);
  --button-cancel-text-col: var(--color-text-primary);
  --button-cancel-hover-bg-col: var(--button-cancel-color-hover);


  --as-notifications-padding-bottom: 2rem;

  --icon-btn-img-filter: brightness(0) invert(1);
  /* Button Sizes */
  --button-height-sm: 2rem;
  /* Button Sizes */
  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;
  --button-padding-x: .5rem;
  --button-padding-y: .5rem;
  --button-font-size-sm: 0.875rem;
  --button-font-size-md: 1rem;
  --button-font-size-lg: 1.25rem;
  --button-bg-color: #eaeef090;

  --shadow-color: 216deg 20% 56%;
  --shadow-opacity: 0.1;
  --shadow-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / var(--shadow-opacity, 0.36)),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / var(--shadow-opacity, 0.36)),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / var(--shadow-opacity, 0.36)),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / var(--shadow-opacity, 0.36));
  --button-shadow: var(--shadow-medium)
}

as-header {
  --button-shadow: none;
  --button-bg-color: transparent;
}