/* ==========================================================================
   CodeArrive - Design tokens, reset and base typography
   --------------------------------------------------------------------------
   Palette rule: the canvas is black and navy, the type is white and silver,
   and royal blue appears ONLY on interactive or emphasised elements. Nothing
   is coloured for decoration. That restraint is what separates this from a
   rainbow-gradient template.
   ========================================================================== */

:root {
  /* --- Canvas ----------------------------------------------------------- */
  --ink: #07090e;          /* page base                                     */
  --ink-soft: #0a0e16;     /* alternating band, breaks up long scrolls      */

  /* --- Surfaces --------------------------------------------------------- */
  --navy: #0e1524;         /* panel                                          */
  --navy-soft: #131c2e;    /* raised panel, inputs                           */
  --navy-hi: #1a2540;      /* hover / pressed                                */

  /* --- Structure -------------------------------------------------------- */
  --line: #1d2942;         /* hairline border                                */
  --line-hi: #2a3a5c;      /* emphasised hairline                            */

  /* --- Accent ----------------------------------------------------------- */
  --royal: #2b5fe3;        /* fills. White text on this is 5.49:1 (AA)       */
  --royal-hi: #4c7df0;     /* accent text. 5.2:1 on --ink (AA)               */
  --royal-lo: #1e47b0;     /* pressed                                        */
  --royal-wash: rgb(43 95 227 / 0.10);
  --royal-edge: rgb(76 125 240 / 0.32);

  /* --- Type ------------------------------------------------------------- */
  --paper: #f3f6fb;        /* primary    16.5:1                              */
  --silver: #9aa8be;       /* secondary   8.3:1                              */
  --steel: #6e7d96;        /* tertiary    4.8:1 - still AA for body text     */

  /* --- Feedback, desaturated so it belongs to the palette --------------- */
  --positive: #4ba3a0;
  --negative: #e08a8a;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* Fluid scale. Every heading interpolates between a phone and a desktop
     size, so there are no awkward jumps at the breakpoints. */
  --t-display: clamp(2.5rem, 1.30rem + 5.0vw, 4.75rem);
  --t-h1: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  --t-h2: clamp(1.5rem, 1.16rem + 1.45vw, 2.25rem);
  --t-h3: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);
  --t-lead: clamp(1rem, 0.95rem + 0.32vw, 1.1875rem);
  --t-body: 0.9375rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;
  --t-micro: 0.6875rem;

  /* --- Space ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --section-y: clamp(4.5rem, 2.5rem + 8vw, 8.5rem);
  --max-w: 1200px;
  --max-w-prose: 46rem;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 12px 28px -18px rgb(0 0 0 / 0.85);
  --shadow-lg: 0 28px 60px -32px rgb(0 0 0 / 0.95);
  --edge-top: inset 0 1px 0 0 rgb(255 255 255 / 0.035);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances, decisive     */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);  /* two-way, symmetric      */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);        /* hovers, small state     */

  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 520ms;
  --d-reveal: 760ms;

  --nav-h: 72px;
  --z-nav: 100;
  --z-sheet: 150;
  --z-modal: 200;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  /* Anchor jumps land below the fixed navbar instead of underneath it. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden` so position:sticky still works inside. */
  overflow-x: clip;
}

img,
picture,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:target {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* ==========================================================================
   Base type helpers
   ========================================================================== */

.display {
  font-size: var(--t-display);
  /* Still tighter than the 1.15 the headings use - it is display type at
     4.75rem - but 1.04 stacked the lines closer than the font's own 1.26em
     content area, so descenders ran into the line below. */
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.h1 { font-size: var(--t-h1); letter-spacing: -0.03em; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.025em; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--silver);
}

.muted { color: var(--silver); }
.dim { color: var(--steel); }
.mono { font-family: var(--font-mono); }

/* The enterprise micro-label: mono, uppercase, wide tracking. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--royal-hi);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.eyebrow--bare::before { display: none; }

/* ==========================================================================
   Selection, focus, scrollbar
   ========================================================================== */

::selection {
  background: var(--royal);
  color: #fff;
}

/* One focus treatment everywhere. Keyboard users get a ring; mouse users
   never see it. */
:focus-visible {
  outline: 2px solid var(--royal-hi);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--steel); }

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 999;
  padding: 0.75rem 1.5rem;
  background: var(--royal);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--d-base) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ==========================================================================
   Reduced motion - remove movement, never remove content
   ========================================================================== */

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

/* ==========================================================================
   Print - flatten to ink on paper
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .site-nav,
  .site-footer,
  .hero-canvas,
  .to-top,
  .scroll-progress { display: none !important; }
  .panel, .card { border: 1px solid #ccc; background: #fff; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}