/* You can add global styles to this file, and also import other style files */

@font-face {
  font-family: 'Matter-Light';
  src: url('assets/fonts/Matter/Matter-Light.ttf');
}

@font-face {
  font-family: 'Matter-Light-Italic';
  src: url('assets/fonts/Matter/Matter-LightItalic.ttf');
}

@font-face {
  font-family: 'Matter-Regular';
  src: url('assets/fonts/Matter/Matter-Regular.ttf');
}

@font-face {
  font-family: 'Matter-Italic';
  src: url('assets/fonts/Matter/Matter-RegularItalic.ttf');
}

@font-face {
  font-family: 'Matter-Medium';
  src: url('assets/fonts/Matter/Matter-Medium.ttf');
}

@font-face {
  font-family: 'Matter-Medium-Italic';
  src: url('assets/fonts/Matter/Matter-MediumItalic.ttf');
}

@font-face {
  font-family: 'Matter-SemiBold';
  src: url('assets/fonts/Matter/Matter-SemiBold.ttf');
}

@font-face {
  font-family: 'Matter-SemiBold-Italic';
  src: url('assets/fonts/Matter/Matter-SemiBoldItalic.ttf');
}

@font-face {
  font-family: 'Matter-Bold';
  src: url('assets/fonts/Matter/Matter-Bold.ttf');
}

@font-face {
  font-family: 'Matter-Bold-Italic';
  src: url('assets/fonts/Matter/Matter-BoldItalic.ttf');
}

@font-face {
  font-family: 'Matter-Heavy';
  src: url('assets/fonts/Matter/Matter-Heavy.ttf');
}

@font-face {
  font-family: 'Matter-Heavy-Italic';
  src: url('assets/fonts/Matter/Matter-HeavyItalic.ttf');
}

:root {
  --primary: #F5F6FD;
  --on-primary: #216CF4;
  --secondary: #E4E4E4;
  --loader-background: #21252964;
  --on-secondary: #999;
  --success: #D0F0D2;
  --on-success: #3DA144;
  --error: #F9DEDC;
  --on-error: #B3261E; 
  --warning: #FFF2E2;
  --on-warning: #F69654;
  --tertiary: #F3F4F5;
  --disabled-background: #000000B2;
  --white: #fff;
  --black: #000;
  --divider-margin: 2rem;
  --font-size: 14px;
  --h1-font-size: 2.25rem;
  --h2-font-size: 1.75rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1.25rem;
  --h5-font-size: 1rem;
  --h6-font-size: 0.875rem;
  --p-font-size: 1rem;
  --extra-small: 0.25rem;
  --small: 0.5rem;
  --regular: 1rem;
  --medium: 1.5rem;
  --large: 2rem;
  --extra-large: 3rem;
  --font-matter-regular: 'Matter-Regular';
  --font-matter-italic: 'Matter-Italic';
  --font-matter-light: 'Matter-Light';
  --font-matter-light-italic: 'Matter-Light-Italic';
  --font-matter-medium: 'Matter-Medium';
  --font-matter-medium-italic: 'Matter-Medium-Italic';
  --font-matter-semibold: 'Matter-SemiBold';
  --font-matter-semibold-italic: 'Matter-SemiBold-Italic';
  --font-matter-bold: 'Matter-Bold';
  --font-matter-bold-italic: 'Matter-Bold-Italic';
  --font-matter-heavy: 'Matter-Heavy';
  --font-matter-heavy-italic: 'Matter-Heavy-Italic';
}

/* Dark theme palette */
.dark-theme {
  --primary: hsla(0, 0%, 12%, 1);           /* Very dark gray for background */
  --on-primary: #99b4e6;                    /* Lighter blue for text (improved contrast) */
  --secondary: hsla(0, 0%, 21%, 1);         /* Slightly lighter gray for cards/sections */
  --loader-background: hsla(0, 0%, 15%, 1); /* Dark gray for loaders */
  --on-secondary: hsla(0, 0%, 60%, 1);      /* Brighter gray for secondary text */
  --success: hsla(124, 52%, 22%, 1);        /* Dark green for success backgrounds */
  --on-success: hsla(124, 45%, 44%, 1);     /* Brighter green for success text/icons */
  --error: hsla(4, 0%, 18%, 1);            /* Brighter red for error backgrounds */
  --on-error: hsla(3, 60%, 41%, 1);         /* Even brighter red for error text/icons */
  --warning: hsla(33, 0%, 16%, 1);         /* Dark orange/yellow for warning backgrounds */
  --on-warning: hsla(24, 60%, 45%, 1);      /* Brighter orange for warning text/icons */
  --tertiary: hsla(0, 0%, 14%, 1);          /* Darker background for tertiary elements */
  --disabled-background: hsla(0, 0%, 0%, 0.7); /* Gray for disabled states */
  --white: hsla(240, 8%, 12%, 1);            /* Pure white for accents */
  --black: #bfbfbf;         /* Pure black for contrast */
}

.button-styling {
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-matter-medium);
  text-wrap: nowrap;
}

body {
  margin: 0;
  overflow: hidden;
}

h1 {
  margin: 0;
  font-size: var(--h1-font-size);
}

h2 {
  margin: 0;
  font-size: var(--h2-font-size);
}

h3 {
  margin: 0;
  font-size: var(--h3-font-size);
}

h4 {
  margin: 0;
  font-size: var(--h4-font-size);
}

h5 {
  margin: 0;
  font-size: var(--h5-font-size);
}

h6 {
  margin: 0;
  font-size: var(--h6-font-size);
}

p {
  margin: 0;
  font-size: var(--p-font-size);
}

html {
  font-family: 'Matter-Regular';
  font-size: var(--font-size);
}

.font-regular {
  font-family: var(--font-matter-regular);
}

.font-italic {
  font-family: var(--font-matter-italic);
}

.font-light {
  font-family: var(--font-matter-light);
}

.font-light-italic {
  font-family: var(--font-matter-light-italic);
}

.font-medium {
  font-family: var(--font-matter-medium);
}

.font-medium-italic {
  font-family: var(--font-matter-medium-italic);
}

.font-semibold {
  font-family: var(--font-matter-semibold);
}

.font-semibold-italic {
  font-family: var(--font-matter-semibold-italic);
}

.font-bold {
  font-family: var(--font-matter-bold);
}

.font-bold-italic {
  font-family: var(--font-matter-bold-italic);
}

.font-heavy {
  font-family: var(--font-matter-heavy);
}

.font-heavy-italic {
  font-family: var(--font-matter-heavy-italic);
}

.text-center {
  text-align: center;
}

/** 
  Spacing classes for elements
*/

// Along Y-axis
.py-extra-small {
  padding: var(--extra-small) 0;
}

.py-small {
  padding: var(--small) 0;
}

.py-regular {
  padding: var(--regular) 0;
}

.py-medium {
  padding: var(--medium) 0;
}

.py-large {
  padding: var(--large) 0;
}

.py-extra-large {
  padding: var(--extra-large) 0;
}

// Spacing on top of element
.pt-extra-small {
  padding: var(--extra-small) 0 0 0;
}

.pt-small {
  padding: var(--small) 0 0 0;
}

.pt-regular {
  padding: var(--regular) 0 0 0;
}

.pt-medium {
  padding: var(--medium) 0 0 0;
}

.pt-large {
  padding: var(--large) 0 0 0;
}

.pt-extra-large {
  padding: var(--extra-large) 0 0 0;
}

// Spacing below element
.pb-extra-small {
  padding: 0 0 var(--extra-small) 0;
}

.pb-small {
  padding: 0 0 var(--small) 0;
}

.pb-regular {
  padding: 0 0 var(--regular) 0;
}

.pb-medium {
  padding: 0 0 var(--medium) 0;
}

.pb-large {
  padding: 0 0 var(--large) 0;
}

.pb-extra-large {
  padding: 0 0 var(--extra-large) 0;
}

// Spacing along X-axis
.px-extra-small {
  padding: 0 var(--extra-small);
}

.px-small {
  padding: 0 var(--small);
}

.px-regular {
  padding: 0 var(--regular);
}

.px-medium {
  padding: 0 var(--medium);
}

.px-large {
  padding: 0 var(--large);
}

.px-extra-large {
  padding: 0 var(--extra-small);
}

// Spacing at start of element
.ps-extra-small {
  padding: 0 0 0 var(--extra-small);
}

.ps-small {
  padding: 0 0 0 var(--small);
}

.ps-regular {
  padding: 0 0 0 var(--regular);
}

.ps-medium {
  padding: 0 0 0 var(--medium);
}

.ps-large {
  padding: 0 0 0 var(--large);
}

.ps-extra-large {
  padding: 0 0 0 var(--extra-large);
}

// Spacing at end of element
.pe-extra-small {
  padding: 0 var(--extra-small) 0 0;
}

.pe-small {
  padding: 0 var(--small) 0 0;
}

.pe-regular {
  padding: 0 var(--regular) 0 0;
}

.pe-medium {
  padding: 0 var(--medium) 0 0;
}

.pe-large {
  padding: 0 var(--large) 0 0;
}

.pe-extra-large {
  padding: 0 var(--extra-large) 0 0;
}

//Spacing at all 4 sides of element
.p-extra-small {
  padding: var(--extra-small);
}

.p-small {
  padding: var(--small);
}

.p-regular {
  padding: var(--regular);
}

.p-medium {
  padding: var(--medium);
}

.p-large {
  padding: var(--large);
}

.p-extra-large {
  padding: var(--extra-large);
}

/** Border Radius */
.radius-extra-small {
  border-radius: var(--extra-small);
}

.radius-small {
  border-radius: var(--small);
}

.radius-regular {
  border-radius: var(--regular);
}

.radius-medium {
  border-radius: var(--medium);
}

.radius-large {
  border-radius: var(--large);
}

.radius-extra-large {
  border-radius: var(--extra-large);
}