/* Messer brand tokens — single source of truth for the dashboard and /privacy.
   Values come from the Messer brand kit (brand-kit/README.txt + Messer Logo.html).
   Display type: Hanken Grotesk 600 (brand kit). Body type: Inter Light (per build spec). */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&family=Inter:wght@300;400;500&display=swap');

:root {
  /* Brand colors */
  --messer-blue: #0082FB;
  --signal-cyan: #00C2FF;
  --near-black: #0A0A0A;
  --pure-white: #FFFFFF;
  --line: #ececef;
  --muted: #9a9aa2;
  --muted-2: #71717a;

  /* The מ gradient — reserved for the mark on light surfaces / app-icon scale */
  --mem-gradient: linear-gradient(135deg, var(--messer-blue), var(--signal-cyan));
  --mem-gradient-tile: linear-gradient(145deg, var(--messer-blue), var(--signal-cyan));

  /* Typography */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.045em;
  --body-weight: 300;

  /* Spacing scale (matches the logo sheet's rhythm) */
  --space-1: 6px;
  --space-2: 14px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Radii / shadows lifted from the logo sheet's icon tile */
  --radius-tile: 34px;
  --radius-card: 16px;
  --shadow-tile: 0 18px 40px -16px rgba(0, 130, 251, 0.55);
}

html, body {
  background: var(--pure-white);
  color: var(--near-black);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  -webkit-font-smoothing: antialiased;
}

.font-display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}

/* Shared מ glyph path — keep in sync with public/brand/svg/messer-mark-*.svg */
.mem-glyph path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 14.5;
}

.surface-dark {
  background: var(--near-black);
  color: var(--pure-white);
}

.tile-gradient {
  background: var(--mem-gradient-tile);
  box-shadow: var(--shadow-tile);
  border-radius: var(--radius-tile);
}