/* veryserious.systems — NEO-BRUTALIST edition · colors & type
 * Ported verbatim from the design system's colors_and_type.css.
 * Do not invent new colors or radii — every value here is a token.
 *
 * Maximal/raw brutalism on a stark white canvas: mono everything,
 * 3px black borders, hard offset (no-blur) shadows, loud green/yellow/pink/orange
 * color blocks, sharp corners (radius 0), playful hover-lift + press-to-shadow.
 * Red is retained for destructive/danger only. Voice stays deadpan & terminal.
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=Geist:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ── neutral ramp (zinc) ─────────────────────────────────────────── */
  --zinc-300: oklch(87.1% 0.006 286.286);
  --zinc-400: oklch(70.5% 0.015 286.067);
  --zinc-500: oklch(55.2% 0.016 285.938);
  --zinc-600: oklch(44.2% 0.017 285.786);
  --zinc-700: oklch(37.0% 0.013 285.805);
  --zinc-800: oklch(27.4% 0.006 286.033);
  --zinc-900: oklch(21.0% 0.006 285.885);
  --zinc-950: oklch(14.1% 0.005 285.823);
  --black: #000;
  --white: #fff;

  /* ── brutalist ink & paper ───────────────────────────────────────── */
  --ink: #0a0a0a;        /* near-black: borders, shadows, body text */
  --paper: #ffffff;      /* stark white canvas */

  /* ── LOUD accent blocks (the brutalist palette) ──────────────────── */
  --brut-green: oklch(62% 0.17 152);      /* hero green — punchy, on-brand */
  --brut-green-deep: oklch(48% 0.13 156); /* deep pine for ink-on-green */
  --brut-yellow: oklch(88% 0.185 99);     /* mascot / queasy-smiley yellow */
  --brut-pink: oklch(70% 0.22 358);       /* hot pink */
  --brut-orange: oklch(73% 0.185 52);     /* vivid orange */
  --brut-blue: oklch(64% 0.19 250);       /* electric blue (tertiary) */

  /* ── status / syntax accent ramp (syntax + IOC severity) ─────────── */
  --red-500: oklch(63.7% 0.237 25.331);
  --orange-500: oklch(70.5% 0.213 47.604);
  --orange-600: oklch(64.6% 0.222 41.116);
  --amber-500: oklch(76.9% 0.188 70.080);
  --amber-600: oklch(66.6% 0.179 58.318);
  --amber-700: oklch(55.5% 0.163 48.998);
  --yellow-500: oklch(79.5% 0.184 86.047);
  --yellow-600: oklch(68.1% 0.162 75.834);
  --green-500: oklch(72.3% 0.219 149.579);
  --cyan-500: oklch(71.5% 0.143 215.221);
  --blue-400: oklch(70.7% 0.165 254.624);
  --blue-500: oklch(62.3% 0.214 259.815);
  --purple-500: oklch(62.7% 0.265 303.900);

  /* ── semantic (brutalist, light) ─────────────────────────────────── */
  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--paper);
  --card-foreground: var(--ink);
  --popover: var(--paper);
  --popover-foreground: var(--ink);
  --primary: var(--brut-green);                  /* vivid green */
  --primary-foreground: var(--ink);              /* black text on color (brutalist) */
  --secondary: var(--brut-yellow);
  --secondary-foreground: var(--ink);
  --muted: oklch(96.5% 0 0);
  --muted-foreground: var(--zinc-600);
  --accent: var(--brut-pink);
  --accent-foreground: var(--ink);
  --destructive: oklch(57.7% 0.245 27.325);      /* RED — danger only */
  --destructive-foreground: var(--paper);
  --border: var(--ink);                          /* borders are BLACK now */
  --input: var(--ink);
  --ring: var(--brut-pink);                      /* focus ring pops */

  /* ── chart ramp (loud, multi-hue for brutalist data viz) ─────────── */
  --chart-1: var(--brut-green);
  --chart-2: var(--brut-yellow);
  --chart-3: var(--brut-pink);
  --chart-4: var(--brut-orange);
  --chart-5: var(--brut-blue);

  /* ── named convenience aliases ───────────────────────────────────── */
  --fg: var(--foreground);
  --fg-1: var(--foreground);
  --fg-2: var(--zinc-700);
  --fg-3: var(--zinc-600);
  --fg-mute: var(--zinc-500);
  --bg: var(--background);
  --bg-2: var(--ink);         /* inverted panels */
  --line: var(--ink);
  --line-strong: var(--ink);

  /* ── type · MONO-EVERYTHING ──────────────────────────────────────── */
  --font-mono: "JetBrains Mono", "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: var(--font-mono);     /* brutalist: mono is the system font */
  --font-display: var(--font-mono);  /* display = mono at max weight */
  --font-geist: "Geist", ui-sans-serif, system-ui, sans-serif; /* legacy escape hatch */

  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.5rem;        /* 24px */
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-hero-sm: 3.5rem;
  --text-hero-md: 6rem;
  --text-hero-lg: 8.5rem;   /* mono is wide — slightly tamed */

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.14em;

  --leading-hero: 0.92;
  --leading-tight: 1.1;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;      /* JetBrains Mono tops out at 800 */

  /* ── shape ───────────────────────────────────────────────────────── */
  --radius: 0;              /* sharp corners — brand-defining */
  --radius-pill: 9999px;    /* circle dots / status only */
  --border-width: 3px;      /* the chunky brutalist hairline */
  --border-width-bold: 4px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── HARD offset shadows (no blur — the brutalist signature) ─────── */
  --shadow-none: none;
  --shadow-ring: 0 0 0 var(--border-width) var(--ink);
  --shadow-sm: 3px 3px 0 0 var(--ink);
  --shadow-card: 5px 5px 0 0 var(--ink);
  --shadow: 6px 6px 0 0 var(--ink);
  --shadow-lg: 8px 8px 0 0 var(--ink);
  --shadow-xl: 12px 12px 0 0 var(--ink);
  /* colored variants for sticker energy */
  --shadow-green: 6px 6px 0 0 var(--brut-green);
  --shadow-pink: 6px 6px 0 0 var(--brut-pink);
  --shadow-yellow: 6px 6px 0 0 var(--brut-yellow);

  --duration-fast: 0.08s;
  --duration: 0.12s;
  --easing: cubic-bezier(0.2, 0.9, 0.3, 1); /* snappy, slight overshoot feel */
}

/* ── inverted variant ────────────────────────────────────────────────
 * NOT a site theme. This theme is LIGHT MODE ONLY — there is no toggle and
 * prefers-color-scheme is deliberately ignored. This block exists solely so
 * a local `--ink` panel (post hero, footer, callout) can flip its borders and
 * shadows to white, exactly as the design system intends. Scope it to an
 * element; never put it on <html> or <body>.
 */
.dark, [data-theme="dark"] {
  --background: var(--ink);
  --foreground: var(--paper);
  --card: var(--ink);
  --card-foreground: var(--paper);
  --popover: var(--ink);
  --popover-foreground: var(--paper);
  --secondary: var(--brut-yellow);
  --secondary-foreground: var(--ink);
  --muted: var(--zinc-900);
  --muted-foreground: var(--zinc-400);
  --border: var(--paper);     /* white borders on dark */
  --input: var(--paper);
  --ring: var(--brut-yellow);
  --line: var(--paper);
  --line-strong: var(--paper);
  --fg-1: var(--paper);
  --fg-2: var(--zinc-300);
  --fg-3: var(--zinc-400);
  --fg-mute: var(--zinc-500);
  --shadow-sm: 3px 3px 0 0 var(--paper);
  --shadow-card: 5px 5px 0 0 var(--paper);
  --shadow: 6px 6px 0 0 var(--paper);
  --shadow-lg: 8px 8px 0 0 var(--paper);
}

/* ── semantic element styles ─────────────────────────────────────────── */
.h-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-hero-lg);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
}
.h1 { font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.p  { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); }
.small { font-size: var(--text-sm); color: var(--fg-2); }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--fg-2); font-weight: var(--weight-bold); }
.code, code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }
.code-inline { font-family: var(--font-mono); font-size: 0.875em; padding: 0.1em 0.4em; background: var(--brut-yellow); border: 2px solid var(--ink); color: var(--ink); }

/* ── brutalist primitives ───────────────────────────────────────────── */

/* card: chunky black border + hard offset shadow, square */
.brut-card {
  border: var(--border-width) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  border-radius: 0;
}

/* interactive surface: lift + nudge on hover, press into the shadow */
.brut-int {
  transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
  cursor: pointer;
}
.brut-int:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.brut-int:active { transform: translate(4px, 4px); box-shadow: var(--shadow-none); }

/* button */
.brut-btn {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-transform: lowercase;
  letter-spacing: 0;
  padding: 10px 18px;
  border: var(--border-width) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  white-space: nowrap;
  transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing), background var(--duration) var(--easing);
}
.brut-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.brut-btn:active { transform: translate(3px, 3px); box-shadow: var(--shadow-none); }
.brut-btn:focus-visible { outline: 0; box-shadow: var(--shadow-sm), 0 0 0 var(--border-width) var(--ring); }
.brut-btn[disabled] { opacity: 0.45; box-shadow: var(--shadow-none); transform: none; cursor: not-allowed; }
.brut-btn-primary { background: var(--brut-green); }
.brut-btn-accent  { background: var(--brut-pink); }
.brut-btn-yellow  { background: var(--brut-yellow); }
.brut-btn-danger  { background: var(--destructive); color: var(--paper); }

/* tag / badge — flat block, black border */
.brut-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 0;
  white-space: nowrap;
}

/* sticker rotations — for that pasted-on energy */
.brut-rot-1 { transform: rotate(-2deg); }
.brut-rot-2 { transform: rotate(1.5deg); }
.brut-rot-3 { transform: rotate(-1deg); }
.brut-rot-4 { transform: rotate(3deg); }

/* exposed grid — visible structural lines */
.brut-grid { background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px); background-size: 24px 24px; opacity: 1; }

/* ── signature corner brackets (thick & black) ──────────────────────── */
.vs-corners { position: relative; }
.vs-corners > .vs-corner { position: absolute; width: 1rem; height: 1rem; }
.vs-corners > .vs-corner.tl { top: 0; left: 0; border-top: var(--border-width) solid currentColor; border-left: var(--border-width) solid currentColor; }
.vs-corners > .vs-corner.tr { top: 0; right: 0; border-top: var(--border-width) solid currentColor; border-right: var(--border-width) solid currentColor; }
.vs-corners > .vs-corner.bl { bottom: 0; left: 0; border-bottom: var(--border-width) solid currentColor; border-left: var(--border-width) solid currentColor; }
.vs-corners > .vs-corner.br { bottom: 0; right: 0; border-bottom: var(--border-width) solid currentColor; border-right: var(--border-width) solid currentColor; }