/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600&display=swap');

/* Variables */
:root {
  /* Colors */
  --background-color: #F6F3F5;
  --font-color: #100A19;
  --accent-color: #5A58A6;
  --light-purple: #888BBF;
  --success-color: #6BCF7F;
  --in-progress-color: #FFD700;
  --error-color: #FF6B6B;
  --green-color: #6B8E23;
  --pink-color: #E97BB0;
  --gray-color: #66606D;
  
  /* Sizes */
  --font-size-l: 52px;
  --font-size-m: 42px;
  --font-size-subtitle-l: 38px;
  --font-size-text-big: 26px;
  --font-size-text-main: 20px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 40px;
  --spacing-xxl: 48px;
  
  /* Borders */
  --thin-border: 2px;
  --thick-border: 4px;
  --border-radius-l: 8px;
  --border-radius-s: 4px;
  
  /* Margins */
  --margin-side: 100px;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --background-color: #100A19;
  --font-color: #F6F3F5;
  --accent-color: #888BBF;
  --light-purple: #5A58A6;
  --green-color: #5A58A6;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: var(--background-color);
  color: var(--font-color);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
h1, .title-l {
  font-weight: 600;
  font-size: var(--font-size-l);
  line-height: 1.2;
}

h2, .subtitle-l {
  font-weight: 400;
  font-size: var(--font-size-subtitle-l);
  line-height: 1.3;
}

.text-big {
  font-weight: 400;
  font-size: var(--font-size-text-big);
  line-height: 1.4;
}

.text-main {
  font-weight: 400;
  font-size: var(--font-size-text-main);
  line-height: 1.5;
}

/* Layout */
.container {
  margin-left: var(--margin-side);
  margin-right: var(--margin-side);
}

/* Buttons */
.btn {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-text-main);
  padding: 12px 24px;
  margin: 12px 24px;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-l);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn:hover:not(:disabled) {
  background-color: var(--light-purple);
}

.btn:disabled {
  background-color: var(--gray-color);
  cursor: not-allowed;
}

/* Text Inputs */
.input-field {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: var(--font-size-text-main);
  color: var(--gray-color);
  padding: 12px 24px;
  margin: 12px 24px;
  border: var(--thin-border) solid var(--gray-color);
  border-radius: var(--border-radius-s);
  outline: none;
}

.input-field:focus {
  border-color: var(--accent-color);
  color: var(--font-color);
}

.input-field.error {
  border-color: var(--error-color);
  color: var(--font-color);
}

.input-field.success {
  border-color: var(--success-color);
  color: var(--font-color);
}

/* Feedback Colors */
.feedback-success {
  color: var(--success-color);
}

.feedback-in-progress {
  color: var(--in-progress-color);
}

.feedback-error {
  color: var(--error-color);
}

/* Additional Classes */
.rounded {
  border-radius: var(--border-radius-l);
}

/* Utility Classes */
.mt-1 { margin-top: var(--spacing-s); }
.mt-2 { margin-top: var(--spacing-m); }
.mt-3 { margin-top: var(--spacing-l); }
.mb-1 { margin-bottom: var(--spacing-s); }
.mb-2 { margin-bottom: var(--spacing-m); }
.mb-3 { margin-bottom: var(--spacing-l); }
.ml-1 { margin-left: var(--spacing-s); }
.ml-2 { margin-left: var(--spacing-m); }
.ml-3 { margin-left: var(--spacing-l); }
.mr-1 { margin-right: var(--spacing-s); }
.mr-2 { margin-right: var(--spacing-m); }
.mr-3 { margin-right: var(--spacing-l); }

.pt-1 { padding-top: var(--spacing-s); }
.pt-2 { padding-top: var(--spacing-m); }
.pt-3 { padding-top: var(--spacing-l); }
.pb-1 { padding-bottom: var(--spacing-s); }
.pb-2 { padding-bottom: var(--spacing-m); }
.pb-3 { padding-bottom: var(--spacing-l); }
.pl-1 { padding-left: var(--spacing-s); }
.pl-2 { padding-left: var(--spacing-m); }
.pl-3 { padding-left: var(--spacing-l); }
.pr-1 { padding-right: var(--spacing-s); }
.pr-2 { padding-right: var(--spacing-m); }
.pr-3 { padding-right: var(--spacing-l); }

/* Dark Mode Toggle */
[data-theme="dark"] {
  --background-color: #100A19;
  --font-color: #F6F3F5;
  --accent-color: #888BBF;
  --light-purple: #5A58A6;
  --green-colour:#5DBB63;
}