/* ==========================================================================
   main.css — mgbah.dev
   Foundation: @font-face, design tokens, reset, base elements, utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — Host Grotesk (self-hosted)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Host Grotesk';
  src: url('/assets/fonts/HostGrotesk-Regular.woff2') format('woff2'),
       url('/assets/fonts/HostGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Host Grotesk';
  src: url('/assets/fonts/HostGrotesk-Bold.woff2') format('woff2'),
       url('/assets/fonts/HostGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design Tokens — CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-bg:          #0a0a0a;
  --color-bg-soft:     #111111;
  --color-bg-card:     #121212;
  --color-border:      #222222;
  --color-text:        #ffffff;
  --color-text-muted:  #858585;
  --color-text-dim:    #444444;
  --color-accent:      #ffffff;
  --color-whatsapp:    #25D366;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  128px;
  --space-3xl:  200px;

  /* Typography Scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   3rem;       /* 48px */
  --text-4xl:   4rem;       /* 64px */
  --text-hero:  6rem;       /* 96px */

  /* Animation Tokens */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-page:   400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Base Element Styles
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'DM Sans', 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}

p {
  line-height: 1.7;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-dim {
  color: var(--color-text-dim);
}

/* --------------------------------------------------------------------------
   Grain overlay — film grain texture (HeyMessage spec)
   Full-page, fixed, pointer-events: none — never blocks interaction
   -------------------------------------------------------------------------- */

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  user-select: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  /* Promote to GPU compositor layer — prevents CPU repaint on scroll */
  transform: translateZ(0);
  will-change: transform;
}