@import url("./fonts.css");

/* 
Hero:
96px - 140px

H1:
64px

H2:
40px

H3:
28px

Body:
18px

Small:
14px
*/

:root {
  color-scheme: light;
  --size: 1.125rem;
  --bg: #F8F7F3;
  --surface: #FFFFFF;
  --text: #111111;
  --muted: #666666;
  --border: #E5E5E5;
  --accent: #FF5A36;
  --accent-dark: #E04B29;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070A;
  --surface: #0C1018;
  --text: #F5F7FA;
  --muted: #94A3B8;
  --border: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F8F7F3;
  --surface: #FFFFFF;
  --text: #111111;
  --muted: #666666;
  --border: #E5E5E5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #05070A;
    --surface: #0C1018;
    --text: #F5F7FA;
    --muted: #94A3B8;
    --border: rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F8F7F3;
    --surface: #FFFFFF;
    --text: #111111;
    --muted: #666666;
    --border: #E5E5E5;
  }
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "Futura-pt", sans-serif;
  background-color: var(--bg);
  color: var(--text);
}