@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #07070E;
  --bg2: #0D0D18;
  --bg3: #1A0E00;
  --card: #16161F;
  --card-warm: #1C1200;
  --card2: #1C1C2A;
  --t1: #FFFFFF;
  --t2: #A0A0B8;
  --t3: #555570;
  --acc: #E87E04;
  --acc2: #F5A623;
  --gold: #F5C842;
  --teal: #00E5C4;
  --green: #52E89A;
  --red: #E84040;
  --amber-bg: rgba(232, 126, 4, 0.12);
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
}

/* Accessibility Profile Overrides */
body.protanopia {
  --red: #0077CC;
  --acc: #00BBAA;
  --acc2: #00DDBB;
}

body.deuteranopia {
  --red: #0077CC;
  --green: #8A2BE2;
  --acc: #0077CC;
  --acc2: #0055AA;
}

body.tritanopia {
  --teal: #FF3333;
  --acc: #E87E04;
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background-color: var(--bg);
  color: var(--t1);
  font-family: 'Inter', 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Mobile viewport constraint (390px-first design) */
body {
  max-width: 480px; /* elegant fit on mobile / centered container on desktop */
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  position: relative;
  background-color: var(--bg);
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Space Grotesk', 'Clash Display', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t1);
}

.brand-title {
  font-family: 'Outfit', 'Space Grotesk', 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: var(--gold);
  text-transform: lowercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title {
  font-family: 'Outfit', 'Space Grotesk', 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 12px;
}

.page {
  flex: 1;
  padding: 16px;
  padding-bottom: 88px; /* space for bottom nav + floating buttons */
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--acc);
}