/* ============================================================================
   Monday Intelligent Systems — Design Tokens (v2)
   An infobase, made on purpose.
   ----------------------------------------------------------------------------
   Two surfaces share one token set:
   - PAPER     primary public. Cream + ink + yellow marker. BuildPod, coaching,
               decks, marketing, web. Loud on what matters.
   - CONSOLE   primary product. Near-black + cyan terminal accent. mAI agent
               UIs, status lines, dashboards.
   Pick a surface by adding [data-surface="paper"] or [data-surface="console"]
   to a root element. Defaults to PAPER — the public is the front door.
   ============================================================================ */

/* @import MUST come first (CSS spec). Loads Geist (body) and JetBrains Mono
   (substrate) from Google Fonts. Bricolage Grotesque is self-hosted below. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap");

/* ---------- Fonts ----------
   DISPLAY: Bricolage Grotesque — self-hosted variable file in fonts/.
            Three axes: opsz (12–96), wdth (75–100), wght (200–800).
   SANS:    Geist — Google Fonts CDN (loaded via @import above).
   MONO:    JetBrains Mono — Google Fonts CDN (loaded via @import above). */
@font-face {
	font-family: "Bricolage Grotesque";
	src:
		url("fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf") format("truetype-variations"),
		url("fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf") format("truetype");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ============== TYPE FAMILIES ==============
     Two job-specific families + one mono.
     - DISPLAY (Bricolage) carries voice at scale: posters, headings,
       hero moments, BuildPod thumbnails. Variable axes (opsz, wdth, wght).
     - SANS (Geist) carries dense work: body text, UI labels, long-form
       reading. Calmer, doesn't get in the way.
     - MONO (JetBrains) is the substrate voice — paths, events, status. */
	--font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Optical-size shortcuts — apply via font-variation-settings */
	--opsz-text: "opsz" 14; /* body */
	--opsz-display: "opsz" 96; /* hero */
	--opsz-mid: "opsz" 48; /* h1/h2 */

	/* ============== TYPE SCALE ============== */
	--t-xxs: 11px;
	--t-xs: 12px;
	--t-sm: 13px;
	--t-base: 16px;
	--t-md: 18px;
	--t-lg: 22px;
	--t-xl: 28px;
	--t-2xl: 40px;
	--t-3xl: 56px;
	--t-4xl: 80px;
	--t-5xl: 120px;
	--t-mega: 180px; /* poster moments. Yes, that big. */

	--lh-tight: 1;
	--lh-snug: 1.15;
	--lh-normal: 1.45;
	--lh-loose: 1.7;

	--tracking-tight: -0.025em;
	--tracking-normal: 0;
	--tracking-caps: 0.08em; /* SECTION LABELS, status line keys */

	/* ============== SPACING (4px base) ============== */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;
	--s-16: 64px;
	--s-20: 80px;
	--s-24: 96px;

	/* ============== RADII ============== */
	/* Files are rectangles. Marker highlights are rectangles. Almost everything
     is a rectangle. Anything > 6px feels wrong. */
	--r-sm: 2px;
	--r-md: 4px;
	--r-lg: 6px;
	--r-pill: 999px;

	--b-hair: 1px;
	--b-rule: 2px;
	--b-stroke: 3px; /* the "drawn-around-it" thick stroke from the BuildPod thumb */

	/* ============== BRAND COLORS — single source of truth ==============
     Hex below is intentionally written out; no oklch / hsla — easier to copy. */
	--marker: #ffd23f; /* THE yellow. Highlighter behind words. */
	--marker-dark: #e6b91f;
	--marker-ink: #0c0c0d; /* text on marker */
	--clay: #b8643a; /* warm secondary, human side */
	--clay-hover: #cf7345;
	--cyan: #3fb6c8; /* terminal accent — Console surface */
	--cyan-hover: #58cad9;
	--cyan-ink: #06181b;
	--sage: #3fa66b; /* event logged, ok */
	--amber: #e89c2a; /* warn — distinct from marker (emphasis) and alert (wrong) */
	--alert: #e94b35; /* something is wrong */
	--plum: #8a4f8f; /* gated / diagrams */
	--slate: #7a8aa4; /* planned / scheduled / not-yet */

	/* ============== STAGE SURFACE ==============
     The chroma-key green for Mike's FigJam-as-presenter setup. Used ONLY
     in the Stage surface — never as a generic UI colour. */
	--stage-green: #1fb454;
	--stage-veil: rgba(0, 0, 0, 0.45); /* the "go behind" grey overlay */

	/* ============== SEMANTIC STATUS ALIASES ==============
     For dashboards, status boards, operator UIs. Use these names — not raw
     palette tokens — so a global rebalance changes one variable, not 50.

     ok       things are good, logged, verified
     warn     attention but not blocking — amber, distinct from yellow marker
     alert    blocking, wrong, immediate
     planned  not yet started, scheduled, future
     gated    blocked on something else, waiting
     info     neutral information, "look at this"
     live     active, streaming, in-progress */
	--status-ok: var(--sage);
	--status-warn: var(--amber);
	--status-alert: var(--alert);
	--status-planned: var(--slate);
	--status-gated: var(--plum);
	--status-info: var(--cyan);
	--status-live: var(--cyan);

	/* ============== DENSITY MODES ==============
     Default = comfortable (BuildPod show notes, marketing, settings).
     Compact = dashboards, event streams, data tables. Wrap a region in
     [data-density="compact"] to switch. */
	--row-pad-y: 8px;
	--row-pad-x: 14px;
	--row-gap: 6px;
	--row-line: 1.5;
	--data-size: 14px;
}

[data-density="comfortable"] {
	--row-pad-y: 8px;
	--row-pad-x: 14px;
	--row-gap: 6px;
	--row-line: 1.5;
	--data-size: 14px;
}

[data-density="compact"] {
	--row-pad-y: 3px;
	--row-pad-x: 10px;
	--row-gap: 2px;
	--row-line: 1.3;
	--data-size: 12px;
}

/* ============================================================================
   STAGE — transparent-PNG surface for FigJam-as-presenter setup.
   The slide is text + elements only — Mike's FigJam canvas provides the
   chroma green, his eCamm setup provides the behind-Mike veil. We design
   for what gets composited: white type on transparent, with the marker as
   the brand thread. Mike screenshots the slide → drops the transparent
   PNG onto his FigJam board.
   ============================================================================ */
[data-surface="stage"] {
	--bg: transparent;
	--panel: transparent;
	--panel-alt: transparent;
	--border: rgba(255, 255, 255, 0.4);
	--rule: rgba(255, 255, 255, 0.3);
	--fg: #ffffff;
	--fg-soft: #f1ebdb;
	--muted: rgba(255, 255, 255, 0.7);
	--whisper: rgba(255, 255, 255, 0.45);
	--selection: rgba(255, 255, 255, 0.2);
	--accent: var(--marker);
	--accent-ink: var(--marker-ink);
	--link: var(--marker);
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
}

/* ============================================================================
   PAPER — primary public surface. The default.
   Cream + ink + yellow marker. BuildPod, coaching, decks, marketing.
   ============================================================================ */
:root,
[data-surface="paper"] {
	--bg: #f1ebdb; /* warm cream */
	--panel: #e6dec8; /* cards, asides */
	--panel-alt: #ddd3b8;
	--border: #c9c1aa;
	--rule: #b8af94;
	--fg: #0c0c0d; /* ink */
	--fg-soft: #2c2a25;
	--muted: #6e6753;
	--whisper: #9a917e;
	--selection: var(--marker);
	--accent: var(--marker);
	--accent-ink: var(--marker-ink);
	--link: var(--clay);

	/* No shadows on Paper. Use rules, blocks, and ink weight. */
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
}

/* ============================================================================
   CONSOLE — primary product surface.
   Near-black + cyan terminal accent. Used for mAI agent UIs, dashboards.
   ============================================================================ */
[data-surface="console"] {
	--bg: #0c0c0d; /* near-black */
	--panel: #18181b;
	--panel-alt: #22222a;
	--border: #2e2e36;
	--rule: #3a3a45;
	--fg: #f1ebdb; /* warm cream text on near-black */
	--fg-soft: #c7c1ad;
	--muted: #8a8472;
	--whisper: #5b5648;
	--selection: rgba(63, 182, 200, 0.18); /* cyan wash */
	--accent: var(--cyan);
	--accent-ink: var(--cyan-ink);
	--link: var(--cyan);

	/* Console has subtle shadows for layering only. Never decorative. */
	--shadow-sm: 0 1px 0 0 rgba(0, 0, 0, 0.45);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   SEMANTIC TYPE — use these classes in product code.
   Bricolage variable axes do the work; we set opsz + weight + width.
   ============================================================================ */

/* DISPLAY — Bricolage at high opsz. Confident, slightly narrow, ink-heavy. */
.t-poster {
	font-family: var(--font-display);
	font-size: clamp(72px, 12vw, var(--t-mega));
	line-height: 0.9;
	letter-spacing: -0.035em;
	font-weight: 800;
	font-variation-settings:
		"opsz" 96,
		"wdth" 85;
}
.t-display-xl {
	font-family: var(--font-display);
	font-size: clamp(56px, 8vw, var(--t-5xl));
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-weight: 700;
	font-variation-settings:
		"opsz" 96,
		"wdth" 90;
}
.t-display {
	font-family: var(--font-display);
	font-size: var(--t-4xl);
	line-height: 1;
	letter-spacing: -0.025em;
	font-weight: 700;
	font-variation-settings:
		"opsz" 80,
		"wdth" 90;
}
.t-display-sm {
	font-family: var(--font-display);
	font-size: var(--t-3xl);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 700;
	font-variation-settings:
		"opsz" 56,
		"wdth" 95;
}

/* HEADINGS — Bricolage at h1/h2 (where character shows); Geist at h3/h4
   (where calm and readable wins). */
.t-h1 {
	font-family: var(--font-display);
	font-size: var(--t-2xl);
	line-height: 1.1;
	letter-spacing: -0.018em;
	font-weight: 700;
	font-variation-settings:
		"opsz" 40,
		"wdth" 100;
}
.t-h2 {
	font-family: var(--font-display);
	font-size: var(--t-xl);
	line-height: 1.2;
	letter-spacing: -0.012em;
	font-weight: 700;
	font-variation-settings:
		"opsz" 28,
		"wdth" 100;
}
.t-h3 {
	font-family: var(--font-sans);
	font-size: var(--t-lg);
	line-height: 1.25;
	letter-spacing: -0.008em;
	font-weight: 600;
}
.t-h4 {
	font-family: var(--font-sans);
	font-size: var(--t-md);
	line-height: 1.3;
	font-weight: 600;
}

/* BODY — Geist. Calm, doesn't get in the way. */
.t-body {
	font-family: var(--font-sans);
	font-size: var(--t-base);
	line-height: var(--lh-normal);
	font-weight: 400;
}
.t-body-lg {
	font-family: var(--font-sans);
	font-size: var(--t-md);
	line-height: var(--lh-loose);
	font-weight: 400;
}
.t-body-sm {
	font-family: var(--font-sans);
	font-size: var(--t-sm);
	line-height: var(--lh-normal);
	font-weight: 400;
}

/* PROSE — long-form reading width */
.t-prose {
	font-family: var(--font-sans);
	font-size: var(--t-md);
	line-height: 1.6;
	font-weight: 400;
	max-width: 62ch;
}

/* MONO — substrate voice. File paths, events, status lines, code. */
.t-mono {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	line-height: 1.45;
	font-weight: 400;
}
.t-mono-sm {
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	line-height: 1.45;
	font-weight: 400;
}
.t-code {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	line-height: 1.5;
	font-weight: 400;
}

/* KICKER — UPPERCASE mono label, used as section markers + status keys.
   "EVENTS LOGGED →" / "CONTEXT:" / "AIM · IN-PROGRESS" */
.t-kicker {
	font-family: var(--font-mono);
	font-size: var(--t-xxs);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--muted);
}

/* ============== MARKER — the brand's signature move ==============
   A yellow rectangle behind 1-2 words. Punk emphasis, Mike's actual idiom.
   Use inline: <span class="t-marker">this matters</span>
   For wrapped multi-line marker, use the box-decoration trick.
   Letter-spacing is reset to 0 so letters breathe inside the box, even
   when the parent is tracked tight (-0.04em on display sizes). */
.t-marker {
	background: var(--marker);
	color: var(--marker-ink);
	padding: 0.08em 0.32em;
	margin: 0 -0.04em;
	letter-spacing: 0;
	border-radius: 1px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-weight: inherit;
}

/* PULL QUOTE — Mike's voice. Bricolage display, big, with marker on the lift. */
.t-pullquote {
	font-family: var(--font-display);
	font-size: var(--t-2xl);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variation-settings:
		"opsz" 40,
		"wdth" 95;
	color: var(--fg);
	max-width: 24ch;
}

/* INLINE TOKENS */
.t-link {
	color: var(--link);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in oklab, var(--link) 40%, transparent);
}
.t-link:hover {
	border-bottom-color: var(--link);
}
.t-em {
	font-style: italic;
}
.t-strong {
	font-weight: 700;
}
.t-num {
	font-variant-numeric: tabular-nums;
}

/* ============================================================================
   THE STATUS LINE — Mike's actual mAI status bar, as a real brand artifact.
   Used in product chrome, BuildPod thumbnails, deck headers. Built from this
   pattern; never reinvented inline.
   ============================================================================ */
.status-line {
	display: inline-flex;
	align-items: baseline;
	gap: var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	letter-spacing: 0;
	white-space: nowrap;
}
.status-line .key {
	color: var(--marker);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 500;
}
.status-line .val {
	color: var(--fg);
}
.status-line .sep {
	color: var(--whisper);
}
.status-line .ok {
	color: var(--sage);
}
.status-line .live {
	color: var(--cyan);
}