/* ============================================================
   GMR Design System — Foundations
   Color + Type tokens derived from the GMR Brand Assets Figma.

   Source of truth:
     • Type:  DM Sans Medium (Figma metadata: 14× usage)
     • Color: #06060A canvas, #E4E4E8 text, #FFFFFF accent
   ============================================================ */

/* ---- Webfont — DM Sans variable (latin) ----------------------- */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.woff2") format("woff2-variations"),
       url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Base color tokens (from Figma) ----------------------- */
  --gmr-ink:        #06060A;   /* canvas — deep near-black */
  --gmr-ink-2:      #0E0E14;   /* surface raised */
  --gmr-ink-3:      #16161E;   /* surface raised +1 */
  --gmr-line:       #22222C;   /* hairline / divider */
  --gmr-line-2:     #2E2E3A;   /* divider hover */

  --gmr-fg:         #FFFFFF;   /* primary text on dark */
  --gmr-fg-2:       #E4E4E8;   /* default body text — the Figma wordmark color */
  --gmr-fg-3:       #9A9AA6;   /* secondary text */
  --gmr-fg-4:       #62626E;   /* tertiary / meta */
  --gmr-fg-dim:     #3A3A46;   /* placeholder / disabled */

  /* Optional inverse (light surface) */
  --gmr-paper:      #F4F4F1;
  --gmr-paper-2:    #E8E8E2;
  --gmr-ink-on-paper:#06060A;

  /* ---- Brand accents — one hue per portfolio product -------- */
  /* The brand wordmarks are PORTMANTEAUS where one half is gray  */
  /* (#E4E4E8) and one half carries the accent. Restrained.       */
  --gmr-accent-gmr:      #E4E4E8;  /* GMR — group, off-white (placeholder, pending real mark) */
  --gmr-accent-brynx:    #3B82F6;  /* BRYNX — the X is blue */
  --gmr-accent-marketear:#8B5CF6;  /* MARKETEAR — MARKET in violet, EAR gray */
  --gmr-accent-crewrev:  #34D399;  /* CREWREV — CREW gray, REV in emerald */
  --gmr-accent-dtwin:    #6B6B80;  /* DTWIN — muted slate: D in #6B6B80, TWIN in #E4E4E8 (inverted contrast — accent half is darker, not brighter) */
  --gmr-accent-influrep: #F59E0B;  /* INFLUREP — INFLU in amber, REP gray */
  --gmr-accent-geoke:    #EC4899;  /* GEOKE — pink: GEO in #EC4899, KE in #E4E4E8 */

  /* Alt mark color — IR has a variant where the gray "R" becomes #1A1A2E,
     for use on lighter surfaces. Treat as a 2nd ink, not a third accent.   */
  --gmr-ink-alt:    #1A1A2E;

  /* ---- Semantic state -------------------------------------- */
  --gmr-success:    #34D399;
  --gmr-warning:    #F59E0B;
  --gmr-danger:     #FF6B6B;
  --gmr-info:       #3B82F6;

  /* ---- Spacing scale (4pt base) ---------------------------- */
  --gmr-space-1: 4px;
  --gmr-space-2: 8px;
  --gmr-space-3: 12px;
  --gmr-space-4: 16px;
  --gmr-space-5: 24px;
  --gmr-space-6: 32px;
  --gmr-space-7: 48px;
  --gmr-space-8: 64px;
  --gmr-space-9: 96px;
  --gmr-space-10: 128px;

  /* ---- Radii ----------------------------------------------- */
  --gmr-radius-0: 0px;        /* default — the system favors sharp corners */
  --gmr-radius-1: 2px;
  --gmr-radius-2: 4px;
  --gmr-radius-3: 8px;
  --gmr-radius-pill: 999px;

  /* ---- Borders --------------------------------------------- */
  --gmr-border:     1px solid var(--gmr-line);
  --gmr-border-2:   1px solid var(--gmr-line-2);
  --gmr-border-fg:  1px solid var(--gmr-fg-2);

  /* ---- Elevation — subtle, glow-free ----------------------- */
  --gmr-elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.6);
  --gmr-elev-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.55);
  --gmr-elev-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(0,0,0,0.55);
  --gmr-focus-ring: 0 0 0 2px var(--gmr-ink), 0 0 0 4px var(--gmr-fg-2);

  /* ---- Type tokens ----------------------------------------- */
  --gmr-font-sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gmr-font-mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --gmr-weight-regular: 400;
  --gmr-weight-medium:  500;
  --gmr-weight-bold:    700;

  /* Type scale — display = wordmark feel */
  --gmr-size-display-xl: 96px;
  --gmr-size-display-l:  72px;
  --gmr-size-display-m:  56px;
  --gmr-size-display-s:  42px;   /* Figma wordmark size */
  --gmr-size-h1:         36px;   /* Figma small wordmark size */
  --gmr-size-h2:         28px;
  --gmr-size-h3:         22px;
  --gmr-size-h4:         18px;
  --gmr-size-body:       15px;
  --gmr-size-small:      13px;
  --gmr-size-micro:      11px;

  --gmr-leading-tight: 100%;
  --gmr-leading-snug:  120%;
  --gmr-leading-body:  150%;

  --gmr-track-display: -0.02em;  /* tighten display */
  --gmr-track-body:    0em;
  --gmr-track-micro:   0.08em;   /* eyebrow / label all-caps */

  /* ---- Motion ---------------------------------------------- */
  --gmr-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --gmr-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --gmr-dur-fast:    120ms;
  --gmr-dur-base:    200ms;
  --gmr-dur-slow:    360ms;
}

/* ---- Semantic resets ------------------------------------------ */
html, body {
  background: var(--gmr-ink);
  color: var(--gmr-fg-2);
  font-family: var(--gmr-font-sans);
  font-size: var(--gmr-size-body);
  line-height: var(--gmr-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wordmark — the central brand expression */
.gmr-wordmark {
  font-family: var(--gmr-font-sans);
  font-weight: var(--gmr-weight-medium);
  font-size: var(--gmr-size-display-s);
  line-height: var(--gmr-leading-tight);
  letter-spacing: var(--gmr-track-display);
  color: var(--gmr-fg-2);
  text-transform: uppercase;
}

.gmr-h1 { font-family: var(--gmr-font-sans); font-weight: 500; font-size: var(--gmr-size-h1); line-height: var(--gmr-leading-tight); letter-spacing: var(--gmr-track-display); color: var(--gmr-fg); }
.gmr-h2 { font-family: var(--gmr-font-sans); font-weight: 500; font-size: var(--gmr-size-h2); line-height: var(--gmr-leading-snug);  letter-spacing: var(--gmr-track-display); color: var(--gmr-fg); }
.gmr-h3 { font-family: var(--gmr-font-sans); font-weight: 500; font-size: var(--gmr-size-h3); line-height: var(--gmr-leading-snug);  letter-spacing: -0.01em; color: var(--gmr-fg); }
.gmr-h4 { font-family: var(--gmr-font-sans); font-weight: 500; font-size: var(--gmr-size-h4); line-height: var(--gmr-leading-snug);  color: var(--gmr-fg); }
.gmr-p  { font-family: var(--gmr-font-sans); font-weight: 400; font-size: var(--gmr-size-body); line-height: var(--gmr-leading-body); color: var(--gmr-fg-2); }
.gmr-small { font-family: var(--gmr-font-sans); font-weight: 400; font-size: var(--gmr-size-small); line-height: 1.5; color: var(--gmr-fg-3); }
.gmr-meta  { font-family: var(--gmr-font-sans); font-weight: 500; font-size: var(--gmr-size-micro); line-height: 1.4; color: var(--gmr-fg-4); text-transform: uppercase; letter-spacing: var(--gmr-track-micro); }
.gmr-mono  { font-family: var(--gmr-font-mono); font-size: 13px; color: var(--gmr-fg-3); }

/* Code blocks */
code, .gmr-code { font-family: var(--gmr-font-mono); font-size: 13px; color: var(--gmr-fg-2); background: var(--gmr-ink-2); padding: 2px 6px; border: var(--gmr-border); border-radius: var(--gmr-radius-1); }