/* Color Variables */
:root {
  /* Gray scale */
  --color-gray-100: #f7fafc;
  --color-gray-200: #edf2f7;
  --color-gray-300: #e2e8f0;
  --color-gray-400: #cbd5e0;
  --color-gray-500: #a0aec0;
  --color-gray-600: #718096;
  --color-gray-700: #4a5568;
  --color-gray-800: #2d3748;
  --color-gray-900: #1a202c;

  /* Basic colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-transparent: transparent;

  /* Main colors, to be overridden by domain */
  --color-primary-800: blue;
  --color-secondary-800: red;

  /* default shades are using mix with white to get the shades */
  --color-primary-200: color-mix(in srgb, var(--color-primary-800) 90%, white);
  --color-primary-200: color-mix(in srgb, var(--color-primary-800) 80%, white);
  --color-primary-300: color-mix(in srgb, var(--color-primary-800) 60%, white);
  --color-primary-400: color-mix(in srgb, var(--color-primary-800) 40%, white);
  --color-primary-500: color-mix(in srgb, var(--color-primary-800) 30%, white);
  --color-primary-600: color-mix(in srgb, var(--color-primary-800) 20%, white);
  --color-primary-700: color-mix(in srgb, var(--color-primary-800) 10%, white);
  --color-secondary-100: color-mix(in srgb, var(--color-secondary-800) 90%, white);
  --color-secondary-200: color-mix(in srgb, var(--color-secondary-800) 80%, white);
  --color-secondary-300: color-mix(in srgb, var(--color-secondary-800) 60%, white);
  --color-secondary-400: color-mix(in srgb, var(--color-secondary-800) 40%, white);
  --color-secondary-500: color-mix(in srgb, var(--color-secondary-800) 30%, white);
  --color-secondary-600: color-mix(in srgb, var(--color-secondary-800) 20%, white);
  --color-secondary-700: color-mix(in srgb, var(--color-secondary-800) 10%, white);


  /* dark shades are using mix with black to get the shades */
  --color-dark-secondary-100: color-mix(in srgb, var(--color-secondary-800) 90%, black);
  --color-dark-secondary-200: color-mix(in srgb, var(--color-secondary-800) 80%, black);
  --color-dark-secondary-300: color-mix(in srgb, var(--color-secondary-800) 70%, black);
  --color-dark-secondary-400: color-mix(in srgb, var(--color-secondary-800) 60%, black);
  --color-dark-secondary-500: color-mix(in srgb, var(--color-secondary-800) 50%, black);
  --color-dark-secondary-600: color-mix(in srgb, var(--color-secondary-800) 40%, black);
  --color-dark-secondary-700: color-mix(in srgb, var(--color-secondary-800) 30%, black);
  --color-dark-secondary-800: color-mix(in srgb, var(--color-secondary-800) 20%, black);
  --color-dark-secondary-900: color-mix(in srgb, var(--color-secondary-800) 10%, black);
  --color-dark-primary-100: color-mix(in srgb, var(--color-primary-800) 90%, black);
  --color-dark-primary-200: color-mix(in srgb, var(--color-primary-800) 80%, black);
  --color-dark-primary-300: color-mix(in srgb, var(--color-primary-800) 70%, black);
  --color-dark-primary-400: color-mix(in srgb, var(--color-primary-800) 60%, black);
  --color-dark-primary-500: color-mix(in srgb, var(--color-primary-800) 50%, black);
  --color-dark-primary-600: color-mix(in srgb, var(--color-primary-800) 40%, black);
  --color-dark-primary-700: color-mix(in srgb, var(--color-primary-800) 30%, black);
  --color-dark-primary-800: color-mix(in srgb, var(--color-primary-800) 20%, black);
  --color-dark-primary-900: color-mix(in srgb, var(--color-primary-800) 10%, black);

  /* Typography */
  --font-title: 'TAN-NIMBUS', 'serif';
  --font-body: 'Glacial Indifference', 'sans-serif';

  --footer-height: 40px;
}

/* Typography */
@font-face {
  font-family: 'TAN-NIMBUS';
  src: url("/assets/TAN-NIMBUS-dbfa258b.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url("/assets/GlacialIndifference-Regular-aca552a6.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url("/assets/GlacialIndifference-Bold-95f8edc6.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url("/assets/GlacialIndifference-Italic-3f38ef1b.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
}