@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cormorant+Garamond:wght@400;500;600&display=swap");

/* ===== tokens/fonts.css ===== */
/* AUBJ typefaces.
   JetBrains Mono carries the identity: display headers, uppercase eyebrows and
   labels, buttons, and figures.
   IBM Plex Sans carries prose: ledes, paragraphs, and card body copy. It is the
   proportional counterpart to a mono skeleton, so the two sit together without
   a visible seam.
   NOTE: no font binaries were supplied with the brief. These are Google Fonts
   stand-ins; replace with local @font-face rules when licensed files arrive.
   Cormorant Garamond is no longer in reserve: it sets eyebrows and labels on
   the marketing site, uppercase and tracked 0.2em. Console and email stay mono. */

/* ===== tokens/colors.css ===== */
/* ── AUBJ color system ───────────────────────────────────────────────
   Two temperatures pulled from the brand imagery: a cold near-black "ink"
   ramp (charcoal, faintly blue) and a "tide" ramp (mythic sea-blue).
   Bone and gild are the only warm notes — used sparingly, as highlight. */
:root {
  /* Ink — cold charcoal ramp. 900 is the canvas in dark mode. */
  --ink-900: #0b0e11;
  --ink-850: #0f1419;
  --ink-800: #121820;
  --ink-700: #1a222c;
  --ink-600: #263039;
  --ink-500: #3a4653;
  --ink-400: #5a6773;
  --ink-300: #7e8b96;
  --ink-200: #a9b4bd;
  --ink-100: #d3dae0;
  --ink-050: #edf0f3;
  --ink-000: #ffffff;

  /* Tide — mythic sea-blue. Primary interactive family. */
  --tide-900: #0d1f28;
  --tide-800: #12303d;
  --tide-700: #17414f;
  --tide-600: #2b6480;
  --tide-500: #3a7c9c;
  --tide-400: #5f9cb8;
  --tide-300: #8fbfd6;
  --tide-200: #bcdae7;
  --tide-100: #e4f1f6;

  /* Bone — parchment warm-neutral, for light surfaces and quiet type. */
  --bone-300: #c9bfa6;
  --bone-200: #e3dccb;
  --bone-100: #f4f1ea;

  /* Gild — antique gold. Accent only: never a background for body text. */
  --gild-600: #a3803d;
  --gild-500: #c9a45a;
  --gild-400: #ddc088;

  /* Signal — muted, never candy-bright. */
  --signal-pos: #5c9c7e;
  --signal-warn: #c9a45a;
  --signal-neg: #b4553f;
  --signal-info: #3a7c9c;

  /* Signal ink — text weight of each signal, dark enough to clear 4.5:1 on its
     own 14-18% tint. Use these for type, never the base values. */
  --signal-pos-ink: #245c44;
  --signal-warn-ink: #6b4e14;
  --signal-neg-ink: #8a3423;
  --signal-info-ink: #1e4f68;

  /* ── Semantic aliases (light-mode defaults) ──
     Light mode is cool, not warm: near-white with a blue-gray cast, matching the
     ink ramp. Bone/parchment is reserved for editorial and dark-mode type. */
  --surface-page: #f5f7f8;
  --surface-card: var(--ink-000);
  --surface-sunken: #eceff2;
  --surface-inverse: var(--ink-900);
  --surface-accent: var(--tide-500);
  --surface-accent-quiet: var(--tide-100);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-400);
  --text-inverse: #f5f7f8;
  --text-accent: var(--tide-600);
  --text-gild: var(--gild-600);
  --text-link: var(--tide-600);
  --text-link-hover: var(--ink-900);

  --border-hairline: #e1e6ea;
  --border-strong: var(--ink-600);
  --border-accent: var(--tide-500);
  --border-focus: var(--tide-500);

  --field-bg: var(--ink-000);
  --field-border: #d5dce1;
  --field-placeholder: var(--ink-300);
}

/* Dark is the brand's native register — the imagery lives here. */
:root[data-theme="dark"] {
  --surface-page: var(--ink-900);
  --surface-card: var(--ink-800);
  --surface-sunken: var(--ink-850);
  --surface-inverse: var(--bone-100);
  --surface-accent: var(--tide-500);
  --surface-accent-quiet: var(--tide-900);

  --text-strong: #f2f5f7;
  --text-body: var(--ink-100);
  --text-muted: var(--ink-300);
  --text-inverse: var(--ink-900);
  --text-accent: var(--tide-300);
  --text-gild: var(--gild-400);
  --text-link: var(--tide-300);
  --text-link-hover: #f2f5f7;

  --border-hairline: #202a34;
  --border-strong: var(--ink-500);

  --signal-pos-ink: #8fd0b0;
  --signal-warn-ink: var(--gild-400);
  --signal-neg-ink: #e08e78;
  --signal-info-ink: var(--tide-300);

  --field-bg: var(--ink-850);
  --field-border: var(--ink-600);
  --field-placeholder: var(--ink-400);
}

/* ===== tokens/typography.css ===== */
/* ── AUBJ typography ─────────────────────────────────────────────────
   Two faces, split by job.

   JetBrains Mono — the identity.
   - Display headers: weight 300, tracking -0.02em, leading 1.10-1.12.
   - Badges and tooltips: weight 300 UPPERCASE, tracked 0.14em.
   - Buttons and figures: weight 300, tracking -0.02em.

   Cormorant Garamond — eyebrows and section labels, marketing surfaces only.
   - 12px, weight 500, UPPERCASE, tracked 0.2em. Never below 12px; its hairlines
     disappear. Console and email keep mono labels for machine-state legibility.

   IBM Plex Sans — the reading face.
   - Ledes: 21px, weight 400, leading 1.5.
   - Body and card copy: 16-17px, weight 400, leading 1.6-1.65, tracking -0.01em.
   - Never uppercase, never tracked out. Uppercase belongs to mono only.

   --font-sans now resolves to IBM Plex Sans; anything that must stay mono
   references --font-mono, --font-display, or --font-label explicitly. */
:root {
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  --font-display: var(--font-mono);
  --font-editorial: "Cormorant Garamond", Georgia, serif;
  --font-label: var(--font-editorial);
  --font-label-ui: var(--font-mono); /* console + email labels stay mono */
  --font-data: var(--font-mono);
  --font-body: var(--font-sans);
  --font-heading: var(--font-display);

  /* Display and label weight, lowered from 500 so mono reads as one voice. */
  --weight-display: 300;
  --weight-label: 600;

  /* Size ramp — 1.25 at the top, tightening to 1.125 at UI sizes. */
  --size-3xs: 11px;
  --size-2xs: 12px;
  --size-xs: 13px;
  --size-sm: 14px;
  --size-md: 16px;
  --size-lg: 18px;
  --size-xl: 21px;
  --size-2xl: 26px;
  --size-3xl: 33px;
  --size-4xl: 44px;
  --size-5xl: 58px;
  --size-6xl: 76px;
  --size-7xl: 104px;

  --weight-hairline: 200;
  --weight-light: 300; /* @kind font */
  --weight-regular: 400; /* @kind font */
  --weight-medium: 500; /* @kind font */
  --weight-semibold: 600; /* @kind font */
  --weight-bold: 700; /* @kind font */
  --weight-black: 800; /* @kind font */

  --leading-tight: 0.94; /* @kind font */
  --leading-display: 1.08; /* @kind font */
  --leading-snug: 1.2; /* @kind font */
  --leading-normal: 1.6; /* @kind font */
  --leading-relaxed: 1.75; /* @kind font */

  /* Display sets tight and negative; mono labels set wide. */
  --tracking-display: -0.02em; /* @kind font */
  --tracking-tight: -0.012em; /* @kind font */
  --tracking-body: -0.01em; /* @kind font */
  --tracking-normal: 0; /* @kind font */
  --tracking-label: 0.2em; /* @kind font — editorial eyebrows */
  --tracking-label-ui: 0.14em; /* @kind font — mono labels in product */
  --tracking-label-wide: 0.22em; /* @kind font */

  /* Prose measure widens from 58ch: Plex Sans sets narrower than mono. */
  --measure-prose: 66ch; /* @kind font */
  --measure-narrow: 46ch; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ── AUBJ spacing & layout ───────────────────────────────────────────
   4px base. Interfaces run balanced-to-airy; editorial surfaces run airy. */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 176px;

  /* Component-level rhythm */
  --gap-inline: var(--space-3);
  --gap-stack: var(--space-5);
  --gap-section: var(--space-12);
  --pad-card: var(--space-7);
  --pad-control-x: var(--space-5);
  --pad-control-y: var(--space-3);

  --control-h-sm: 30px;
  --control-h-md: 38px;
  --control-h-lg: 48px;

  --shell-max: 1240px;
  --shell-gutter: var(--space-8);
  --rail-w: 248px;
  --topbar-h: 60px;
  --grid-cols: 12; /* @kind other */
}

/* ===== tokens/effects.css ===== */
/* ── AUBJ borders, radii, elevation, atmosphere ──────────────────────
   Radii are small and deliberate — punchy, not pillowy. Nothing above 10px
   except pills and media. Elevation in dark mode is done with borders and
   glow, not drop shadows; light mode uses low, cold, wide shadows. */
:root {
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 10px;
  --radius-media: 14px;
  --radius-pill: 999px;

  --border-w-hairline: 1px; /* @kind spacing */
  --border-w-strong: 2px; /* @kind spacing */
  --border-w-rule: 1px; /* @kind spacing */

  --ring-focus: 0 0 0 3px rgba(58, 124, 156, 0.34); /* @kind shadow */
  --ring-focus-inverse: 0 0 0 3px rgba(143, 191, 214, 0.28); /* @kind shadow */

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 14, 17, 0.06);
  --shadow-2: 0 2px 8px -2px rgba(11, 14, 17, 0.1), 0 1px 2px rgba(11, 14, 17, 0.05);
  --shadow-3: 0 12px 32px -12px rgba(11, 14, 17, 0.22), 0 2px 6px rgba(11, 14, 17, 0.06);
  --shadow-lift: 0 24px 64px -24px rgba(11, 14, 17, 0.34);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* @kind shadow */
  --glow-tide: 0 0 0 1px var(--tide-700), 0 0 34px -10px rgba(58, 124, 156, 0.55); /* @kind shadow */

  /* Atmosphere — the "sun through haze" gradient from the brand imagery.
     Use as an overlay on photography, or as a section wash. Never as a
     button or card fill. */
  --wash-horizon: radial-gradient(120% 80% at 50% -10%, rgba(226, 238, 244, 0.9) 0%, rgba(226, 238, 244, 0) 62%); /* @kind other */
  --wash-depth: linear-gradient(180deg, rgba(11, 14, 17, 0) 0%, rgba(11, 14, 17, 0.82) 100%); /* @kind other */
  --wash-tide: linear-gradient(180deg, var(--tide-900) 0%, var(--ink-900) 100%); /* @kind other */

  /* Protection gradient for type over imagery — always this, never a capsule. */
  --scrim-bottom: linear-gradient(0deg, rgba(11, 14, 17, 0.88) 0%, rgba(11, 14, 17, 0.55) 42%, rgba(11, 14, 17, 0) 100%); /* @kind other */
  --scrim-flat: rgba(11, 14, 17, 0.55); /* @kind other */

  --blur-glass: 14px; /* @kind other */
  --glass-fill: rgba(18, 24, 32, 0.62); /* @kind color */
  --glass-fill-light: rgba(255, 255, 255, 0.72); /* @kind color */

  /* Grain: applied as a repeating overlay on hero imagery at 6-10% opacity. */
  --grain-opacity: 0.07; /* @kind other */
}

/* ===== tokens/motion.css ===== */
/* ── AUBJ motion ─────────────────────────────────────────────────────
   Motion is weighted, never springy. Things arrive by fading and rising a
   few pixels. Nothing bounces, nothing overshoots. */
:root {
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
  --dur-reveal: 620ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --transition-control: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard); /* @kind other */
  --transition-surface: background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); /* @kind other */

  --rise-distance: 8px; /* @kind spacing */
  --press-scale: 0.985; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ── AUBJ base ───────────────────────────────────────────────────────
   Minimal reset plus the type defaults and link colors. Consumers get this
   for free by linking styles.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--size-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-display);
  color: var(--text-strong);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}
h1 { font-size: var(--size-5xl); font-weight: 200; }
h2 { font-size: var(--size-4xl); font-weight: 200; }
h3 { font-size: var(--size-2xl); }
h4 { font-size: var(--size-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--text-link) 34%, transparent); transition: var(--transition-control); }
a:hover { color: var(--text-link-hover); border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-2);
}
hr { height: 0; margin: 0; border: 0; border-top: var(--border-w-rule) solid var(--border-hairline); }
::selection { background: var(--tide-300); color: var(--ink-900); }
img, svg, video { display: block; max-width: 100%; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* The product label voice: console and email surfaces. Marketing eyebrows use
   --font-label (editorial) at --tracking-label instead; see site.css .eyebrow. */
.aubj-label {
  font-family: var(--font-label-ui);
  font-size: var(--size-3xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label-ui);
  text-transform: uppercase;
  color: var(--text-muted);
}
.aubj-display { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.aubj-lede { font-size: var(--size-lg); line-height: var(--leading-relaxed); color: var(--text-body); max-width: var(--measure-prose); }

@keyframes aubj-spin { to { transform: rotate(360deg); } }
@keyframes aubj-rise { from { opacity: 0; transform: translateY(var(--rise-distance)); } to { opacity: 1; transform: none; } }
@keyframes aubj-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}