/* ============================================================
   MirAI Design System — Foundations
   "AI Governance. Human Vision."

   The MirAI palette is intentionally tri-color. Do not introduce
   new hues. Do not introduce new gray hex values. All grays are
   derived as opacity channels of Pure Black.
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Core palette ----------------------------------------- */
  --white: #ffffff;
  --black: #000000;
  --mirai-blue: #556dd7;

  /* -- Derived alpha tokens (Pure Black with opacity) ------- */
  --text-primary: #000000;            /* headings, primary data, nav */
  --text-secondary: rgba(0, 0, 0, 0.65); /* body, metadata, timestamps */
  --text-tertiary: rgba(0, 0, 0, 0.45);  /* captions, disabled */
  --border-subtle: rgba(0, 0, 0, 0.15);  /* 1px brutalist grid lines */
  --border-strong: rgba(0, 0, 0, 1);     /* governance buttons, active */
  --surface-muted: rgba(0, 0, 0, 0.04);  /* table headers, hover rows */
  --surface-hover: rgba(0, 0, 0, 0.06);
  --inset-press: rgba(0, 0, 0, 0.10);    /* primary hover inset shadow */

  /* MirAI Blue alpha ramp — for governed-data backgrounds, focus rings */
  --blue-04: rgba(85, 109, 215, 0.04);
  --blue-08: rgba(85, 109, 215, 0.08);
  --blue-15: rgba(85, 109, 215, 0.15);
  --blue-30: rgba(85, 109, 215, 0.30);
  --blue-100: #556dd7;

  /* -- Surfaces --------------------------------------------- */
  --surface: #ffffff;          /* primary background */
  --surface-inverse: #000000;  /* high-contrast / dark structural elements */

  /* -- Typography ------------------------------------------- */
  --font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — proportional, enterprise density */
  --fs-display: 48px;   /* H1 — dashboard headers */
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;      /* default — 1.5 line height */
  --fs-sm: 14px;        /* metadata */
  --fs-xs: 12px;        /* captions, audit log timestamps */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;   /* uppercase eyebrows */

  /* -- Spacing — 4px base ----------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -- Radii — duality of interaction ----------------------- */
  --radius-0: 0px;     /* immutable structural walls */
  --radius-structural: 4px;  /* data-bearing containers */
  --radius-interactive: 8px; /* buttons, inputs, "Human Vision" surfaces */
  --radius-pill: 999px;      /* tags, badges */

  /* -- Brutalist hard shadows — solid, unblurred offsets ---- */
  --shadow-hard-sm: 2px 2px 0 0 #000000;
  --shadow-hard: 4px 4px 0 0 #000000;
  --shadow-hard-lg: 6px 6px 0 0 #000000;
  --shadow-hard-blue: 4px 4px 0 0 #556dd7;
  /* No drop shadows. No blur. No glassmorphism. */

  /* -- Motion — deterministic, ease-out ---------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --stagger: 50ms;

  /* -- Layout ----------------------------------------------- */
  --grid-border: 1px solid var(--border-subtle);
  --max-content: 1280px;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numerals align in tabular columns for audit logs, IPs, financial data */
.tabular,
.num,
table,
code,
pre,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Semantic typography
   ------------------------------------------------------------ */
h1, .h1, .display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-secondary);  /* bulk body uses 65% opacity */
  margin: 0;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.meta, small, .caption {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-muted);
  padding: 0 4px;
  border-radius: var(--radius-structural);
}

a {
  color: var(--mirai-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-30);
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--mirai-blue); }

::selection { background: var(--mirai-blue); color: var(--white); }

/* ------------------------------------------------------------
   Component primitives
   ------------------------------------------------------------ */

/* Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-interactive);
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  user-select: none;
}

.btn-primary {
  background: var(--mirai-blue);
  color: var(--white);
  border-color: var(--mirai-blue);
}
.btn-primary:hover {
  /* Inset shadow gives tactile feedback (no fade) */
  box-shadow: inset 0 0 0 100px var(--inset-press);
}
.btn-primary:active {
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.18);
}

.btn-secondary {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
}
.btn-secondary:hover {
  background: var(--black);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-muted); }

.btn-sm { padding: 8px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 16px 28px; font-size: var(--fs-body-lg); }

/* Inputs ---------------------------------------------------- */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-interactive);
  padding: 12px 14px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.input:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--mirai-blue);
  box-shadow: 0 0 0 3px var(--blue-15);
}
.input::placeholder { color: var(--text-tertiary); }

/* Cards ----------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-structural);
  padding: var(--space-6);
}
.card-elevated {
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: var(--radius-structural);
  box-shadow: var(--shadow-hard);
  padding: var(--space-6);
}

/* Badges / tags --------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 4px 8px;
  border-radius: var(--radius-structural);
  border: 1px solid var(--border-subtle);
  background: var(--white);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge-blue {
  background: var(--mirai-blue);
  color: var(--white);
  border-color: var(--mirai-blue);
}
.badge-black {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.badge-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--black);
}

/* Pulsing cursor for streaming output */
.stream-cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--mirai-blue);
  margin-left: 2px;
  animation: stream-pulse 1s var(--ease-in-out) infinite;
}
@keyframes stream-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Industrial hazard stripes — Shadow AI marker */
.hazard-stripes {
  background-image: repeating-linear-gradient(
    45deg,
    #000000 0,
    #000000 8px,
    #ffffff 8px,
    #ffffff 16px
  );
}