/* ==========================================================================
   Zenji — Colors & Type tokens
   ========================================================================== */

/* Fonts
   --------------------------------------------------------------------------
   Zenji typography is premium sans-serif. No pixel, no retro. The pixel
   character comes exclusively from the wordmark (SVG, set in Digitalix);
   every other surface uses a contemporary grotesque.

   Canonical face:   PP Neue Montreal (Pangram Pangram)  — display + ui
   Open-source fallback: Geist (Vercel)                   — loaded live here
   Body workhorse:   PP Neue Montreal → Geist → system
   Mono / data:      JetBrains Mono (data, IOCs, code)

   PP Neue Montreal is a paid/free-for-personal face; drop the woff2 files
   into /fonts/ and the @font-face declarations below pick it up. Until
   then the stack falls through to Geist, which is free and excellent. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* --- Brand palette (sampled from provided assets) ----------------------- */
  --zenji-purple:        #B366FF; /* primary — saturated brand purple (Slack mark bg) */
  --zenji-lavender:      #CE99FE; /* surface — page / marketing canvas */
  --zenji-lavender-soft: #D8ACFF; /* subtle — cards, inputs, pressed rows */
  --zenji-lavender-haze: #E5CBFF; /* faint — dividers, section breaks */
  --zenji-ink:           #0A0A0A; /* primary ink + CTA fill */
  --zenji-ink-2:         #1F1F1F; /* secondary ink, near-black components */
  --zenji-paper:         #FFFFFF; /* rare — crisp paper, modal sheets */
  --zenji-smoke:         #F5F0FA; /* near-white with a lavender cast */

  /* --- Semantic status (security-context aware) --------------------------- */
  --zenji-critical:      #FF3B3B; /* CVE high / breach */
  --zenji-warn:          #FFB020; /* attention / exposed */
  --zenji-ok:            #22C55E; /* resolved / safe */
  --zenji-info:          #6AA9FF; /* neutral info */

  /* --- Foreground / background roles -------------------------------------- */
  --fg-1: var(--zenji-ink);         /* headings, primary body */
  --fg-2: #3A3340;                  /* secondary copy */
  --fg-3: #6A5F73;                  /* tertiary / meta */
  --fg-inverse: var(--zenji-paper); /* text on ink */
  --fg-accent: var(--zenji-purple);

  --bg-1: var(--zenji-lavender);    /* page (marketing) */
  --bg-2: var(--zenji-lavender-soft);
  --bg-3: var(--zenji-lavender-haze);
  --bg-card: var(--zenji-lavender-soft);
  --bg-input: var(--zenji-paper);
  --bg-ink: var(--zenji-ink);
  --bg-app: #0E0B12;                /* app/product dark surface */
  --bg-app-2: #17121D;

  /* --- Borders ------------------------------------------------------------ */
  --border-ink: var(--zenji-ink);
  --border-soft: rgba(10, 10, 10, 0.12);
  --border-hairline: rgba(10, 10, 10, 0.08);

  /* --- Radii (brand runs flat / low radius; pills for buttons) ----------- */
  --radius-0: 0px;
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 14px;
  --radius-pill: 999px;

  /* --- Elevation (brand is largely flat; shadows are rare & hard-edged) -- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(10, 10, 10, 0.06);
  --shadow-2: 0 2px 0 0 var(--zenji-ink);   /* stamped / pixel shadow */
  --shadow-3: 0 4px 0 0 var(--zenji-ink);   /* larger stamp */

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

  /* --- Type families ------------------------------------------------------
     One family everywhere: PP Neue Montreal. Geist is the open-source
     fallback and the loaded font until Neue Montreal files are dropped in.
     No pixel typography outside the SVG wordmark. */
  --font-display: 'PP Neue Montreal', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'PP Neue Montreal', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Type scale (display runs BIG; body is calm) ------------------------ */
  --size-display-xl: 120px; /* hero wordmark ("GET EARLY ACCESS") */
  --size-display-l:  72px;
  --size-display-m:  48px;
  --size-display-s:  32px;

  --size-h1: 32px;
  --size-h2: 24px;
  --size-h3: 20px;
  --size-body-l: 18px;
  --size-body: 15px;
  --size-body-s: 13px;
  --size-caption: 12px;
  --size-micro: 11px;

  /* --- Line heights (display is tight; body is generous) ------------------ */
  --lh-display: 0.95;
  --lh-tight:   1.15;
  --lh-body:    1.5;
  --lh-loose:   1.7;

  /* --- Letter spacing ------------------------------------------------------ */
  --ls-display: -0.025em; /* large display tightens optically */
  --ls-label:   0.08em;   /* eyebrows / pills, UPPERCASE */
  --ls-body:    0;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 360ms;
}

/* ==========================================================================
   Semantic text styles — apply these as classes or mixin them into elements
   ========================================================================== */

/* Display — PP Neue Montreal, weight 700. Optical tightening at big sizes. */
.zj-display,
.zj-display-xl,
.zj-display-l,
.zj-display-m,
.zj-display-s {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.zj-display-xl { font-size: var(--size-display-xl); }
.zj-display-l  { font-size: var(--size-display-l);  }
.zj-display-m  { font-size: var(--size-display-m);  }
.zj-display-s  { font-size: var(--size-display-s);  }

/* Headings — body sans, weight for hierarchy */
.zj-h1 { font-family: var(--font-body); font-size: var(--size-h1); font-weight: 700; line-height: var(--lh-tight); color: var(--fg-1); }
.zj-h2 { font-family: var(--font-body); font-size: var(--size-h2); font-weight: 600; line-height: var(--lh-tight); color: var(--fg-1); }
.zj-h3 { font-family: var(--font-body); font-size: var(--size-h3); font-weight: 600; line-height: var(--lh-tight); color: var(--fg-1); }

/* Body */
.zj-body-l { font-family: var(--font-body); font-size: var(--size-body-l); line-height: var(--lh-body); color: var(--fg-1); }
.zj-body   { font-family: var(--font-body); font-size: var(--size-body);   line-height: var(--lh-body); color: var(--fg-1); }
.zj-body-s { font-family: var(--font-body); font-size: var(--size-body-s); line-height: var(--lh-body); color: var(--fg-2); }

/* Caption / meta */
.zj-caption { font-family: var(--font-body); font-size: var(--size-caption); line-height: var(--lh-body); color: var(--fg-3); }
.zj-micro   { font-family: var(--font-body); font-size: var(--size-micro);   line-height: var(--lh-body); color: var(--fg-3); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* Label / pill eyebrow — UPPERCASE, tracked */
.zj-label {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Monospace — terminal / data / code / IOC values */
.zj-mono { font-family: var(--font-mono); font-size: var(--size-body-s); line-height: var(--lh-body); color: var(--fg-1); }
.zj-mono-l { font-family: var(--font-mono); font-size: var(--size-body); line-height: var(--lh-body); color: var(--fg-1); }

/* Code blocks */
.zj-code {
  font-family: var(--font-mono);
  font-size: var(--size-body-s);
  line-height: var(--lh-body);
  background: var(--zenji-ink);
  color: #E8DFFF;
  padding: var(--space-4);
  border-radius: var(--radius-1);
}