/* ==================== BASE RESET ==================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
}

html {
  font-size: calc(18px * (var(--font-scale, 100) / 100));

  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;

  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text-primary);
}

/* ==================== LOW POWER MODE ==================== */
:root[data-low-power="true"] {
  --acrylic-blur: 0px !important;
}

:root[data-low-power="true"] *,
:root[data-low-power="true"] *::before,
:root[data-low-power="true"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Disable animations that might be heavy if needed, but the user only asked for blur */
}

:root[data-low-power="true"] .custom-bg {
  filter: none !important; /* Disable blur on custom background */
}

/* ==================== CUSTOM BACKGROUND ==================== */
.custom-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: opacity var(--duration-slow) var(--ease-standard);

  &.hidden {
    display: none;
  }
}

/* Skip Link */
.skip-link {
  font-weight: 600;
  text-decoration: none;

  position: absolute;
  top: -100px;
  left: 0;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.2s;
  border-radius: 0 0 var(--radius-md) var(--radius-md);

  background: var(--accent-default);
  color: var(--text-on-accent);

  &:focus {
    top: 0;
  }
}

/* Button Reset for Titles */
.logo-title-btn,
.mobile-app-title-btn {
  font: inherit;
  text-align: left;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-left: var(--spacing-sm);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast);

  background: none;
  color: inherit;

  &:hover {
    background: var(--card-bg-hover);
  }

  &:focus-visible {
    outline: 2px solid var(--accent-default);
    outline-offset: 2px;
  }
}

/* Global Focus Visible Styles for keyboard users */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--accent-default) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(96, 205, 255, 0.3) !important;
}

/* ==================== SCROLLBARS ==================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

  &::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  &::-webkit-scrollbar-track {
    border-radius: var(--radius-pill);

    background: var(--scrollbar-track);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background var(--duration-fast);

    background: var(--scrollbar-thumb);

    &:hover {
      background: var(--scrollbar-thumb-hover);
      background-clip: content-box;
    }
  }
}