/* ============================================================
   MEWAYZ Marketing — Design Tokens
   Bold, italic, athletic, monochrome with electric accents.
   ============================================================ */

@font-face {
  font-family: "Airstrike";
  src: url("assets/fonts/airstrike.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* Color */
  --ink: #0A0A0A;
  --ink-soft: #1A1A1A;
  --paper: #FAFAFA;
  --paper-warm: #F0EDE4;
  --paper-cream: #E8E2D3;
  --mute: #6B6B6B;
  --mute-soft: #9B9B9B;
  --line: rgba(10, 10, 10, 0.12);
  --line-strong: rgba(10, 10, 10, 0.32);
  --line-dark: rgba(250, 250, 250, 0.16);

  /* Accent */
  --accent: #4F46E5;        /* indigo — matches product UI */
  --accent-warm: #FF5C1F;   /* signal orange — savings/warnings */
  --accent-cool: #1F6FFF;   /* electric blue — alt */

  /* Type */
  --font-display: "Airstrike", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* Scale */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display { font-family: var(--font-display); font-style: italic; letter-spacing: -0.02em; line-height: 0.88; }
.mono { font-family: var(--font-mono); }
.sans { font-family: var(--font-sans); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Hex utilities */
.hex-clip {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

/* Slash decoration matching Airstrike italic */
.slash-pattern {
  background-image: repeating-linear-gradient(
    -75deg,
    var(--ink) 0,
    var(--ink) 2px,
    transparent 2px,
    transparent 12px
  );
}