/* Most of IT — design system, vendored for the Velzio static site.
   Source of truth: Claude Design "Most of IT Design System" (tokens/*).
   Operator Modernism: warm off-white ground, ink ramp, Inter + JetBrains Mono,
   two weights (400/500), hairline borders, no shadows on marketing surfaces. */

/* ---- fonts ---- */
@import url("../fonts/fonts.css"); /* self-hosted (GDPR) — was Google Fonts CDN */

/* ---- color tokens (neutral base + accent contract) ---- */
:root {
  --bg-primary: #FAFAF7;
  --bg-raised: #FFFFFF;
  --bg-quiet: #F4F2EC;

  --ink-primary: #0E0E0E;
  --ink-secondary: #54544F;
  /* WCAG AA: tertiary/semantic tokens double as text colors in labels and badges.
     Originals (tertiary #8A8A85 = 3.3:1, warning #D97706 = 3.1:1, success #1F8A4C
     = 4.2:1) fail the 4.5:1 minimum; these hold the same hue at passing contrast.
     Upstream DS (packages/design-system) intentionally left untouched. */
  --ink-tertiary: #71716C;   /* 4.7:1 on --bg-primary */

  --border-default: #DEDED8;
  --border-strong: #C5C5BE;

  --success: #187840;        /* 5.3:1 */
  --warning: #A85B04;        /* 4.8:1 */
  --danger: #C2401F;         /* 5.0:1 */

  /* default accent = base brand (ink); pages override with Velzio indigo */
  --accent: var(--ink-primary);
  --accent-strong: #000000;
  --accent-pressed: #000000;
  --accent-soft: var(--bg-quiet);
  --accent-on: #FFFFFF;
  --accent-ring: rgba(14, 14, 14, 0.30);

  --font-display: var(--font-sans);
}

[data-theme="dark"] {
  --bg-primary: #0E0E0E;
  --bg-raised: #16161A;
  --bg-quiet: #1F1F22;
  --ink-primary: #FAFAF7;
  --ink-secondary: #B5B5B0;
  --ink-tertiary: #7A7A75;
  --border-default: #2A2A2D;
  --border-strong: #3D3D40;
  --accent: var(--ink-primary);
  --accent-strong: #FFFFFF;
  --accent-pressed: #FFFFFF;
  --accent-soft: var(--bg-quiet);
  --accent-on: #0E0E0E;
  --accent-ring: rgba(250, 250, 247, 0.30);
}

/* ---- type tokens ---- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --text-display: 56px;   --leading-display: 56px;   --tracking-display: -0.04em;
  --text-h1: 36px;        --leading-h1: 40px;        --tracking-h1: -0.03em;
  --text-h2: 28px;        --leading-h2: 32px;        --tracking-h2: -0.02em;
  --text-h3: 20px;        --leading-h3: 28px;        --tracking-h3: -0.01em;
  --text-body-lg: 18px;   --leading-body-lg: 28px;
  --text-body: 16px;      --leading-body: 24px;
  --text-small: 14px;     --leading-small: 22px;
  --text-caption: 12px;   --leading-caption: 16px;   --tracking-caption: 0.05em;
  --measure: 68ch;
}
.t-display { font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:var(--text-display); line-height:var(--leading-display); letter-spacing:var(--tracking-display); color:var(--ink-primary); }
.t-h1 { font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:var(--text-h1); line-height:var(--leading-h1); letter-spacing:var(--tracking-h1); color:var(--ink-primary); }
.t-h2 { font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:var(--text-h2); line-height:var(--leading-h2); letter-spacing:var(--tracking-h2); color:var(--ink-primary); }
.t-h3 { font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:var(--text-h3); line-height:var(--leading-h3); letter-spacing:var(--tracking-h3); color:var(--ink-primary); }
.t-body-lg { font-family:var(--font-sans); font-weight:var(--weight-regular); font-size:var(--text-body-lg); line-height:var(--leading-body-lg); color:var(--ink-secondary); }
.t-body { font-family:var(--font-sans); font-weight:var(--weight-regular); font-size:var(--text-body); line-height:var(--leading-body); color:var(--ink-secondary); }
.t-small { font-family:var(--font-sans); font-weight:var(--weight-regular); font-size:var(--text-small); line-height:var(--leading-small); color:var(--ink-secondary); }
.t-caption { font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:12px; line-height:16px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-tertiary); }

/* ---- spacing / radius / layout tokens ---- */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:20px;
  --content-max:1120px; --reading-max:680px;
  --border-hairline:0.5px;
  --shadow-overlay:0 8px 28px rgba(14,14,14,0.12);
}

/* ---- base element resets + ground ---- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0; background:var(--bg-primary); color:var(--ink-secondary);
  font-family:var(--font-sans); font-size:var(--text-body); line-height:var(--leading-body);
  font-weight:var(--weight-regular);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; color:var(--ink-primary); font-weight:var(--weight-medium); }
p { margin:0; }
a { color:inherit; text-decoration:none; }
code, pre, kbd, samp { font-family:var(--font-mono); font-size:0.92em; }
code { background:var(--bg-quiet); border:var(--border-hairline) solid var(--border-default); border-radius:var(--radius-sm); padding:0.1em 0.36em; color:var(--ink-primary); }
::selection { background:var(--accent-soft); color:var(--ink-primary); }
hr { border:none; border-top:var(--border-hairline) solid var(--border-default); margin:var(--space-5) 0; }

/* ---- Velzio brand accent (indigo, per Website v2) ----
   Apply on <body> or a wrapper; the design uses this as the surface accent. */
.velzio {
  --accent:#4438CA; --accent-strong:#6258D2; --accent-pressed:#30278D;
  --accent-soft:#E8E7F3; --accent-on:#FFFFFF; --accent-ring:rgba(68,56,202,0.30);
  --accent-2:#0E7C66;
}

/* ---- DS Button (recreated as plain CSS; matches MostOfITDesignSystem Button) ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:14px;
  border-radius:var(--radius-md); border:var(--border-hairline) solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-sm { height:32px; padding:0 12px; font-size:13px; }
.btn-md { height:40px; padding:0 16px; }
.btn-lg { height:48px; padding:0 22px; font-size:15px; }
.btn-primary { background:var(--accent); color:var(--accent-on); }
.btn-primary:hover { background:var(--accent-strong); }
.btn-primary:active { background:var(--accent-pressed); }
.btn-secondary { background:transparent; color:var(--ink-primary); border-color:var(--border-strong); }
.btn-secondary:hover { border-color:var(--ink-primary); background:var(--bg-quiet); }
.btn-tertiary { background:transparent; color:var(--ink-primary); }
.btn-tertiary:hover { background:var(--bg-quiet); }
.btn-block { width:100%; }

a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }


/* ---- accessibility: skip-to-content link (hidden until keyboard focus) ---- */
.vz-skip {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  background: var(--accent, #4438CA);
  color: var(--accent-on, #FFFFFF);
  padding: 10px 16px;
  border-radius: 8px;
  font: 500 14px/1 var(--font-sans, system-ui, sans-serif);
  text-decoration: none;
  transition: top 120ms ease;
}
.vz-skip:focus { top: 8px; outline: 2px solid var(--accent-on, #fff); outline-offset: 2px; }

/* ---- brand pack: velzio ----
   Canonical source: packages/design-system/brands/velzio.css (minted from seed
   #4438CA via brands/seed.js). Keep this block byte-identical to that file. */
/* Brand pack — velzio. Minted from seed #4438CA. */
[data-brand="velzio"] {
  --brand-50: #F0EFFB;
  --brand-100: #D6D3F3;
  --brand-200: #A29CE5;
  --brand-400: #665CD4;
  --brand-500: #4438CA;
  --brand-700: #352C99;
  --brand-900: #211C59;

  --accent: var(--brand-500);
  --accent-strong: var(--brand-400);
  --accent-pressed: var(--brand-700);
  --accent-soft: var(--brand-50);
  --accent-on: #FFFFFF;
  --accent-ring: rgba(68, 56, 202, 0.30);
}
[data-theme="dark"] [data-brand="velzio"],
[data-theme="dark"][data-brand="velzio"] {
  --accent-soft: var(--brand-900);
}