@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap");

:root {
  color-scheme: light;

  /* Light theme values from src/theme/tokens.ts -> LIGHT_COLORS */
  --bg: rgb(242, 237, 231);
  --bg-gradient-top: rgb(250, 248, 244);
  --surface: rgb(255, 253, 250);
  --surface-2: rgb(248, 244, 238);
  --border: rgba(43, 33, 24, 0.12);
  --divider: rgba(43, 33, 24, 0.06);
  --text: rgb(40, 33, 28);
  --text-muted: rgba(40, 33, 28, 0.68);
  --text-subtle: rgba(40, 33, 28, 0.45);
  --accent: rgb(244, 131, 5);
  --accent-soft: rgba(244, 131, 5, 0.16);
  --friend: rgb(42, 126, 124);
  --on-accent: rgb(255, 250, 244);

  --topography-primary: rgba(244, 131, 5, 0.66);
  --topography-secondary: rgba(242, 237, 231, 0);
  --topography-tertiary: rgba(40, 33, 28, 0);

  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;
  --space-xl: 24px;
  --space-2xl: 36px;
  --space-3xl: 56px;

  --radius-card: 20px;
  --radius-small: 14px;
  --radius-pill: 999px;

  --max-width: 1020px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --brand-mark-svg: url("/assets/brand/climbsync_icon_twotone_lightmode.svg");
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Dark theme values from src/theme/tokens.ts -> SLATE_COLORS (Granite Grip) */
  --bg: rgb(28, 32, 40);
  --bg-gradient-top: rgb(36, 42, 52);
  --surface: rgb(40, 47, 58);
  --surface-2: rgb(34, 40, 50);
  --border: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.08);
  --text: rgb(232, 237, 246);
  --text-muted: rgba(232, 237, 246, 0.72);
  --text-subtle: rgba(232, 237, 246, 0.48);
  --accent: rgb(244, 123, 0);
  --accent-soft: rgba(244, 123, 0, 0.18);
  --friend: rgb(112, 188, 200);
  --on-accent: rgb(24, 20, 16);

  --topography-primary: rgba(244, 123, 0, 1);
  --topography-secondary: rgba(28, 32, 40, 0);
  --topography-tertiary: rgba(40, 33, 28, 0);

  --brand-mark-svg: url("/assets/brand/climbsync_icon_twotone_darkmode.svg");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg) 38%);
  color: var(--text);
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(var(--max-width), 92%);
  margin: 0 auto;
}