/* styles/theme.css — Design tokens, fonts, global reset */

@font-face { font-family: 'VWTheGroup'; src: url('/assets/fonts/TheGroupTEXT-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'VWTheGroup'; src: url('/assets/fonts/TheGroupTEXT-Regular.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'VWTheGroup'; src: url('/assets/fonts/TheGroupTEXT-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --unit: 10px;
  --rem: 16px;
  --color-rabbit-white: #ffffff;
  --color-panther-black: #000000;
  --color-rabbit-black: #1b1e1f;
  --color-rhino-gray: #4c5356;
  --color-wolf-gray: #E5E6E8;
  --color-donkey-gray: #A8ADB3;
  --color-elephant-gray: #7F8789;
  --color-skunk-gray: #34393B;
  --color-grey-300: #CACDD2;
  --color-dolphin-blue: #006384;
  --color-shark-blue: #004666;
  --color-deep-space-blue: #002733;
  --color-deep-space-blue-700: #325360;
  --color-vivid-green-400: #37a99e;
  --color-vivid-green-600: #008075;
  --color-vivid-green-700: #006058;
  --color-vivid-green-800: #004942;
  --color-fox-red: #e4002c;
  --color-system-red-600: #F03D3E;
  --color-froggy-green: #95A844;
  --color-system-green-600: #08A334;
  --font-family-primary: 'VWTheGroup', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --text-size-base: var(--rem);
  --text-size-headline-large: calc(1.75 * var(--rem));
  --text-size-headline-medium: calc(1.125 * var(--rem));
  --text-size-footer: calc(0.875 * var(--rem));
  --text-size-alert: calc(0.75 * var(--rem));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family-primary), Arial, sans-serif;
  font-size: var(--text-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-rabbit-black);
  background-color: var(--color-wolf-gray);
  background-image: url('/assets/bg.png');
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}