/* RMSR design tokens — generated from RMSR-Brand-Book.html
   Import once (e.g. globals.css / _app) and reference vars everywhere
   instead of hardcoded hex. Don't hand-tune these per-component. */

:root {
  /* Surfaces */
  --rmsr-ink: #0A1420;        /* primary background — navy pushed to near-black */
  --rmsr-deep-steel: #132234; /* secondary surfaces, cards, panels */

  /* Brand anchor */
  --rmsr-navy: #003263;       /* pulled directly from the logo artwork */

  /* Accents */
  --rmsr-orange: #FF5A1F;     /* primary accent — CTAs, active states, links */
  --rmsr-ice: #35C6E0;        /* secondary accent — sparing use, cool contrast to orange */

  /* Text */
  --rmsr-snow: #F5F8FA;       /* headlines, high-contrast text on dark */
  --rmsr-frost: #AFC1CE;      /* body text on dark surfaces */

  /* Structure — tactile brutalism direction, see BRAND.md */
  --rmsr-line: rgba(245,248,250,0.10);  /* hairline border — replaces box-shadow everywhere */
  --rmsr-radius: 0;                     /* sharp corners site-wide; no rounded panels/buttons/inputs */
  --rmsr-border-width: 1px;

  /* Type */
  --rmsr-font-display: 'Rajdhani', sans-serif; /* headlines, labels, kickers — uppercase */
  --rmsr-font-body: 'Inter', sans-serif;       /* everything else */
}

/* Grain overlay — cheap, CSS-only, fixed over the whole page.
   Use once, site-wide — either as `body::before { ... these properties ... }`
   or as a literal `<div class="rmsr-grain-overlay">` placed once near the top
   of <body>. Don't apply it per-component or duplicate it on every page section.
   Keep opacity in the 0.03–0.05 range; this should read as texture, not visible static. */
.rmsr-grain-overlay {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Google Fonts import — place in <head> or @import at top of CSS entrypoint:
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
*/

/* Usage rules:
   - Backgrounds: --rmsr-ink (page), --rmsr-deep-steel (cards/panels)
   - Headlines/labels: --rmsr-font-display, uppercase, var(--rmsr-snow)
   - Body copy: --rmsr-font-body, var(--rmsr-frost)
   - Primary CTA / active states: var(--rmsr-orange)
   - Secondary accent (use sparingly — not a second CTA color): var(--rmsr-ice)
   - Navy shows up in logo lockups and as a light-background/print anchor,
     not as a UI background on its own. */