/* ==========================================================================
   NIRO KNOX — DESIGN TOKENS
   Brand system: "Compact" (Concept 3) — dark, high-contrast, conversion-first.
   Reuse this file as-is for any future campaign/landing pages so all
   Niro Knox properties stay visually identical.
   ========================================================================== */

:root {
  /* ---- Color: Core ---- */
  --color-bg: #0a0a0a;              /* near-black base */
  --color-bg-raised: #141414;       /* cards, panels */
  --color-bg-raised-2: #1c1c1c;     /* nested panels, inputs */
  --color-border: #2a2a2a;          /* hairlines on dark */
  --color-border-strong: #3a3a3a;

  --color-text: #f5f1ea;            /* warm off-white, not pure white */
  --color-text-dim: #b7b2a8;        /* secondary copy */
  --color-text-faint: #7a766e;      /* tertiary / meta */

  /* ---- Color: Brand Accent (orange-red) ---- */
  --color-accent: #ff4a1c;          /* primary accent — CTAs, links, highlights */
  --color-accent-hover: #ff6640;
  --color-accent-active: #e03e14;
  --color-accent-ink: #1a0a05;      /* text-on-accent when accent is a large fill */

  /* ---- Color: Semantic ---- */
  --color-success: #4ade80;
  --color-error: #ff4a1c;           /* reuse accent for errors — single alarm color */
  --color-focus: #ff6640;

  /* ---- Typography ---- */
  --font-display: 'Anton', 'Arial Narrow Bold', sans-serif;        /* headlines, nav, buttons */
  --font-brand: 'NiroKnox', var(--font-display);                    /* wordmark / hero kicker only — sparing use */
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;      /* paragraphs, forms, labels */

  --fs-display-xl: clamp(2.75rem, 6vw, 5.5rem);   /* hero headline */
  --fs-display-lg: clamp(2rem, 4vw, 3.25rem);     /* section headline */
  --fs-display-md: clamp(1.5rem, 2.5vw, 2rem);    /* card/subsection headline */
  --fs-display-sm: 1.125rem;                      /* nav, buttons, labels */
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-meta: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --ls-display: 0.01em;
  --ls-eyebrow: 0.16em;   /* uppercase kicker tracking */
  --ls-button: 0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius / Borders ---- */
  --radius-sm: 2px;    /* stamped/industrial look — mostly square */
  --radius-md: 4px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-thick: 2px;

  /* ---- Shadow / Texture ---- */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-accent-glow: 0 0 0 3px rgba(255, 74, 28, 0.25);
  --stamp-rotate: -1.5deg; /* stamped-button rotation used sparingly on CTA accents */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Breakpoints (reference only — used in media queries directly) ---- */
  /* sm: 480px, md: 768px, lg: 1024px, xl: 1280px */
}

@font-face {
  font-family: 'NiroKnox';
  src: url('../assets/fonts/NiroKnox.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}