/*============================== | Table of Contents ==============================*/
/* 1. Import Resources
   - External font links
   - Local font links
*/
/* 2. Custom CSS Properties
   - Color variables
   - Font variables
   - Text size variables
   - Border radius variables
   - Spacing variables
*/

/* 3. Base Normalization Styles
   - Box-sizing rules
   - Default margin reset for common elements
   - List style reset
   - Anchor tag reset (without class)
   - Image reset
   - Font inheritance for inputs and buttons
   - Root element default behavior
   - Basic body styles
   - Reduced motion preferences
*/

/* 4. Global styles and resets
   - Block display for common elements (a, img, input, button, etc.)
   - Pointer cursor for buttons
*/

/* 5. Typography styles 
   - Heading styles (h1 to h6)
*/

/* 6. Utility Classes
   - Font size utilities
   - Background color utilities
   - Text color utilities
   - Display utilities
   - COntainer utilities
   - Width and height utilities
*/

/*============================== 1. Import Resources ==============================*/

/*------ External font links ------*/
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Karla:ital,wght@0,200..800;1,200..800&display=swap");

/*------ Local font links ------*/

/*============================== 2. Custom CSS Properties ==============================*/

:root {
  /*------ Color variables ------*/

  /* Neutral */
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --gray-light: hsl(0, 0%, 96.1%);
  --gray: hsl(0, 0%, 80%);
  --gray-dark: hsl(0, 0%, 29%);

  /* Main Colors */
  --primary: hsl(211.1, 100%, 50%);
  --secondary: hsl(208.2, 13.6%, 45.7%);
  --success: hsl(133.7, 76%, 40.6%);
  --danger: hsl(354.3, 75.9%, 53.5%);
  --warning: hsl(45, 97.3%, 51.4%);
  --info: hsl(188.2, 87.5%, 40.6%);

  /* Color palette (all the colors specific to your project) */
  --charcoal-dark: hsl(270, 9%, 17%);
  --gray-mist: hsl(273, 4%, 51%);
  --midnight-purple: hsl(256, 25%, 20%);
  --sky-blue: hsl(216, 30%, 68%);

  /* Background */
  --background-light: hsl(0, 0%, 100%);
  --background-dark: hsl(210, 18.8%, 22.7%);

  /* Text */
  --text-light: hsl(0, 0%, 100%);
  --text-dark: hsl(210, 19.5%, 14.5%);

  /*------ Font variables ------*/
  --text-font: "Karla", sans-serif;
  --subTitle-font: "DM Serif Display", sans-serif;
  --title-font: "DM Serif Display", sans-serif;

  /*------ Text size variables ------*/
  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 1.87rem;
  --fs-4xl: clamp(1.9rem, 6vw + 1rem, 5rem);

  /*------ Border radius variables ------*/
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  /* Spacing variables */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-lg: 2rem;
  --spacing-fluid: 5vw;
}

/*- Media Queries for larger screens, adjusting text sizes -*/

@media (min-width: 51.875em) {
  :root {
    --fs-xs: 0.9375rem;
    --fs-sm: 1rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.5rem;
    --fs-xl: 2rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.75rem;
    --fs-4xl: clamp(3.5rem, 4vw + 1rem, 4.25rem);
  }
}

/* Large desktop (min-width: 51.875em) */
@media (min-width: 64em) {
  :root {
    --fs-xs: 1rem;
    --fs-sm: 1.125rem;
    --fs-md: 1.5rem;
    --fs-lg: 2rem;
    --fs-xl: 2.5rem;
    --fs-2xl: 3rem;
    --fs-3xl: 3.5rem;
    --fs-4xl: clamp(5rem, 4vw + 1rem, 6rem);
  }
}

/*============================== 3. Base Normalization Styles ==============================*/

/* Box-sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Default margin reset for common elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with list role */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Shorter line heights for headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Default styles for unclassed anchors */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

a[class] {
  text-decoration: none;
}

/* Ensure textareas without rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Add extra scroll margin for anchored elements */
:target {
  scroll-margin-block: 5ex;
}

/* Image handling */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Font inheritance for inputs, buttons, and form elements */
input,
button,
textarea,
select {
  font: inherit;
  font-size: inherit;
}

/* Default root behavior */
html:focus-within {
  scroll-behavior: smooth;
}

/* Base styles for body */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: var(--text-font, sans-serif);
  color: var(--charcoal-dark);
}

/* Reduce motion for users preferring reduced animations */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*============================== 4. Global styles and resets ==============================*/

/* Ensure elements like a, img, input, button display as block */
a,
img,
span,
input,
button {
  display: block;
}

/* Pointer cursor for buttons */
button {
  cursor: pointer;
}

/*============================== 5. Typography styles ==============================*/

/* Add heading styles if needed (h1 to h6) */

/*============================== 6. Utility Classes ==============================*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

/* Font size utilities */
.fs-xs {
  font-size: var(--fs-xs);
}
.fs-sm {
  font-size: var(--fs-sm);
}
.fs-md {
  font-size: var(--fs-md);
}
.fs-lg {
  font-size: var(--fs-lg);
}
.fs-xl {
  font-size: var(--fs-xl);
}
.fs-2xl {
  font-size: var(--fs-2xl);
}

/* Background color utilities */
.bg-white {
  background-color: var(--white);
}
.bg-black {
  background-color: var(--black);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-success {
  background-color: var(--success);
}
.bg-danger {
  background-color: var(--danger);
}
.bg-warning {
  background-color: var(--warning);
}
.bg-info {
  background-color: var(--info);
}

/* Text color utilities */
.text-white {
  color: var(--white);
}
.text-black {
  color: var(--black);
}
.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.text-success {
  color: var(--success);
}
.text-danger {
  color: var(--danger);
}
.text-warning {
  color: var(--warning);
}
.text-info {
  color: var(--info);
}

/* Display utilities */
.flex {
  display: flex;
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-space, 1rem);
}

/* Conatainer */
.container {
  padding-inline: 2em;
  margin-inline: auto;
  max-width: 80rem;
}

.grid-container {
  text-align: center;
  display: grid;
  place-items: center;
  padding-inline: 1rem;
}

.grid-container * {
  max-width: 50ch;
}

/* Width utilities */
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}

/* Height utilities */
.h-full {
  height: 100%;
}
.h-auto {
  height: auto;
}