/* ==========================================================================
   Homewind – Design Tokens
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("./src/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 8px; scroll-behavior: smooth; }
body { margin: 0; line-height: normal; font-family: var(--font-primary); color: var(--color-text); }

/* --- Tokens --- */
:root {
  /* Font */
  --font-primary: Inter, sans-serif;

  /* Color */
  --color-white: #fff;
  --color-black: #000;
  --color-primary: #f00f66;
  --color-primary-dark: #da1161;
  --color-primary-darker: #ae1558;
  --color-accent-section: #6b1a4a;
  --color-bg: #fff;
  --color-bg-muted: #eef2fa;
  --color-bg-dark: #132237;
  --color-text: #333;
  --color-text-muted: #202d3f;
  --color-text-light: rgba(255, 255, 255, 0.7);
  --color-border: #d1daeb;
  --color-gray-100: #fafafa;
  --color-gray-200: #282828;
  --color-gray-300: #132237;
  --color-gray-400: #171717;
  --color-gray-500: #070707;
  --color-gray-600: rgba(255, 255, 255, 0.7);
  --color-gray-700: rgba(255, 255, 255, 0.1);
  --color-gray-800: rgba(255, 255, 255, 0.25);
  --color-gray-900: rgba(24, 24, 24, 0.75);
  --color-gray-1000: rgba(0, 0, 0, 0.5);
  --color-slategray: #516682;
  --color-darkslategray-100: #3d4f67;
  --color-darkslategray-300: #333;
  --color-darkslategray-400: #202d3f;

  /* Spacing (1rem = 8px) */
  --space-2: 0.25rem;
  --space-4: 0.5rem;
  --space-6: 0.75rem;
  --space-8: 1rem;
  --space-12: 1.5rem;
  --space-14: 1.75rem;
  --space-16: 2rem;
  --space-20: 2.5rem;
  --space-24: 3rem;
  --space-32: 4rem;
  --space-40: 5rem;
  --space-48: 6rem;
  --space-64: 8rem;
  --space-80: 10rem;

  /* Font Size */
  --text-xs: 1.5rem;
  --text-sm: 1.75rem;
  --text-base: 2rem;
  --text-lg: 2.25rem;
  --text-xl: 2.5rem;
  --text-2xl: 3rem;
  --text-3xl: 4.5rem;
  --text-hero: 6rem;

  /* Line Height */
  --lh-18: 2.25rem;
  --lh-21: 2.624rem;
  --lh-24: 3rem;
  --lh-54: 6.75rem;

  /* Radius */
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 40px;
  --radius-1_14: 1.14px;

  /* Shadow */
  --shadow-card: 0 0 20px rgba(61, 79, 103, 0.3);
  --shadow-card-alt: 0 0 20px rgba(81, 102, 130, 0.3);

  /* Layout */
  --nav-height: 15.5rem;
  --content-max-width: 180rem;
  --content-narrow: 97.5rem;
  --max-w-768: 96rem;
  --min-w-393: 49.124rem;

  /* iPhone Mockup Sizing (nur für Device-Showcase) */
  --mockup-phone-h: 91.912rem;
  --mockup-phone-w: 44.424rem;
  --mockup-screen-w: 40.8rem;
  --mockup-btn-w: 0.286rem;
  --mockup-btn-h: 0.286rem;
  --mockup-split-w: 0.186rem;
  --mockup-split-h: 1.15rem;
}