/* ----------------------------------------
   Dark Mode Styles
---------------------------------------- */
.dark-mode {
  --color-primary: #f1f0ec;
  --color-accent-1: #e67782; /* Unchanged from default */
  --color-accent-soft: #f2a6b3; /* Unchanged from default */
  --color-accent-2: #f4c542; /* Unchanged from default */
  --color-accent-3: #f58b57; /* Unchanged from default */
  --color-accent-4: #b497e6; /* Unchanged from default */
  --color-bg: #0d0d0d;
  --color-bg-alt: #141414;
  --color-text: #f8f8f8;
  --color-border: #333;
  --color-grey: #1a1a1a;
  background-color: var(--color-bg);
  color: var(--color-text);
}

:root {
  /* Colour palette */
  --color-primary: #13325e;
  --color-accent-1: #e67782;
  --color-accent-soft: #f2a6b3;
  --color-accent-2: #f4c542;
  --color-accent-3: #f58b57;
  --color-accent-4: #b497e6;
  --color-bg: #fefdfb;
  --color-bg-alt: #f6f5f2;
  --color-text: #2a2f4a;
  --color-border: #d5d3df;
  --color-grey: #f1f0ec;

  /* Font weights */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  /* Media queries */
  --bp-tablet: 600px;
  --bp-desktop: 900px;
  --bp-large: 1200px;

  /* Spacing scale */
  --space-xxs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 4rem; /* 64px */
  --space-3xl: 8rem; /* 128px */
  --space-4xl: 12rem; /* 192px */
  --space-5xl: 20rem;

  /* Border radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px; /* For pills, circles */

  /* Font sizes */
  --fs-hero: 3rem;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.6rem;
  --fs-h5: 1.2rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-sm: 0.85rem;
  --fs-xs: 0.7rem;
}

:root,
body {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease; /* Smooth transition to all colour related properties */
}

/* ----------------------------------------
   Reset & Base Styles
---------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: var(--fw-light);
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------
   Focus Styles
---------------------------------------- */
a:focus-visible,
.button-01:focus-visible,
#nav-toggle:focus-visible {
  /* Universal focus-visible styles for interactive elements */
  outline: 3px solid var(--color-accent-1);
  outline-offset: 3px;
  box-shadow: 0 0 8px var(--color-accent-1);
  border-radius: var(--radius-sm); /* if they're rounded */
}

.dark-mode-toggle input:focus-visible + .toggle-slider {
  /* Dark mode toggle: visually hidden input triggers focus ring on visible slider */
  outline: 3px solid var(--color-accent-1);
  outline-offset: 3px;
  box-shadow: 0 0 8px var(--color-accent-1);
  border-radius: 9999px;
}

/* ----------------------------------------
   Tablet (min-width: 768px)
---------------------------------------- */
@media screen and (min-width: 768px) {
  :root {
    --fs-hero: 3rem;
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.75rem;
  }
}

/* ----------------------------------------
   Desktop (min-width: 1024px)
---------------------------------------- */
@media screen and (min-width: 1024px) {
  :root {
    --fs-hero: 3.25rem;
    --fs-h1: 3.25rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --fs-h4: 1.5rem;
    --fs-h5: 1.3rem;
    --fs-h6: 1.1rem;
    --fs-sm: 0.9rem;
  }
}