/* =============================================================
   Violet Tek | Design System
   CSS custom properties and global element defaults.
   Ported verbatim from the HTML source (vt2.css / _ds tokens).
   The source is the visual authority - do not hand-tune values here.
   ============================================================= */


/* --- tokens/colors.css --- */
:root{
/* Brand petals — sampled from the official logo file. Signals, never wallpaper. */
--orange:#FA7401;
--blue:#0189D3;
--green:#02A04C;
--yellow:#F9CC01;
--crimson:#D8244B;

/* Structural base */
--ink:#101012;
--near-black:#17171C;
--canvas:#FFFFFF;
--paper:#FCFBF9;
--soft-stone:#F3F1ED;
--card-border:#F0EFEC;
--hairline:#E2E0DB;
--border-light:#E5E7EB;
--text-ink:#1A1A1A;
--slate:#6B6B76;
--muted-slate:#8A8A93;

/* Deep bands — full-width sections */
--deep-navy:#0B2A42;
--deep-crimson:#3D0A1B;
--deep-green:#04361D;

/* Washes */
--pale-navy:#EAF2F8;
--pale-orange:#FFF3E9;
--pale-green:#EAF7EF;
--soft-orange:#FBC896;

/* Semantic */
--focus-blue:#4C6EE6;
--error-red:#B30000;

/* On-dark text (inside deep bands and the ops console) */
--on-navy:#B9C8D4;
--on-crimson:#D9B4BF;
--on-dark:#A7A7AE;
--on-dark-muted:#7D7D87;
--dark-hairline:#2B2B31;

/* Status chip fills — translucent petal over near-black */
--chip-ok-bg:rgba(2,160,76,.18);
--chip-ok-fg:#4FD98A;
--chip-warn-bg:rgba(250,116,1,.18);
--chip-warn-fg:#FFA85C;
--chip-alert-bg:rgba(216,36,75,.18);
--chip-alert-fg:#FF7592;

/* Semantic aliases — prefer these in product code */
--text-primary:var(--text-ink);
--text-secondary:var(--slate);
--text-tertiary:var(--muted-slate);
--text-inverse:#FFFFFF;
--text-link:var(--blue);
--surface-page:var(--canvas);
--surface-paper:var(--paper);
--surface-card:var(--soft-stone);
--surface-inverse:var(--near-black);
--border-hairline:var(--hairline);
--border-card:var(--card-border);
--action-primary:var(--near-black);
--action-accent:var(--crimson);
--accent-taxonomy:var(--orange);
--accent-data:var(--blue);
--accent-verified:var(--green);
--accent-highlight:var(--yellow);
--focus-ring:0 0 0 3px rgba(76,110,230,.15);
--motif-gradient:linear-gradient(90deg,var(--orange),var(--blue),var(--green),var(--yellow),var(--crimson));
}

/* --- tokens/typography.css --- */
:root{
--font-display:'Poppins',system-ui,sans-serif;
--font-body:'Inter',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;

/* Sizes */
--fs-hero:74px;
--fs-page:56px;
--fs-section:36px;
--fs-card:24px;
--fs-body-lg:18px;
--fs-body:16px;
--fs-body-sm:14px;
--fs-caption:13px;
--fs-mono:12px;
--fs-mono-sm:11px;

/* Weights */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:800; /* @kind font */

/* Line heights */
--lh-hero:1.0; /* @kind font */
--lh-page:1.05; /* @kind font */
--lh-section:1.2; /* @kind font */
--lh-card:1.3; /* @kind font */
--lh-body-lg:1.55; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-caption:1.45; /* @kind font */
--lh-mono:1.4; /* @kind font */

/* Tracking */
--tr-hero:-1.6px;
--tr-page:-1.1px;
--tr-section:-.5px;
--tr-card:-.2px;
--tr-mono:.14em;
--tr-mono-tight:.06em;
}

/* --- tokens/spacing.css --- */
:root{
/* 8px base scale */
--sp-1:8px;
--sp-2:16px;
--sp-3:24px;
--sp-4:40px;
--sp-5:64px;
--sp-6:96px;
--sp-7:128px;

/* Composite rhythm */
--section-pad-y:64px;
--section-pad-x:40px;
--section-pad-y-mobile:44px;
--section-pad-x-mobile:22px;
--container-max:1080px;
--container-wide:1440px;
--measure-copy:660px;
--measure-lead:560px;
}

/* --- tokens/radius.css --- */
:root{
--r-xs:4px;
--r-sm:8px;
--r-md:16px;
--r-lg:22px;
--r-xl:30px;
--r-pill:999px;
}

/* --- tokens/elevation.css --- */
/* VioletTek has no drop-shadow system. Depth comes from surface alternation,
   1px hairlines, rounded media over contrasting fields, and full-width dark bands.
   The only shadow in the system is the focus ring. */
:root{
--elev-flat:none;
--elev-bordered:1px solid var(--hairline);
--elev-card-border:1px solid var(--card-border);
--elev-media-radius:var(--r-lg);
--shadow-focus:0 0 0 3px rgba(76,110,230,.15);
}

/* --- spacing scale + base reset (vt2.css 1-27) --- */
/* ================= SPACING SCALE =================
   4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Two fluid section rhythms are
   built from adjacent steps so they interpolate between real values rather than
   arbitrary ones. Section padding is symmetric by default: top always equals bottom. */
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --sec-y:clamp(var(--s-9),11vh,var(--s-10));
  --sec-y-sm:clamp(var(--s-8),8vh,var(--s-9));
  --gap-grid:clamp(var(--s-5),2.4vw,var(--s-6));
  --gap-split:clamp(var(--s-6),4.4vw,var(--s-9));
  --head-gap:clamp(var(--s-6),5vh,var(--s-7));
  --stack:var(--s-5);
}
/* Violet Tek v2 — cinematic dark language. Tokens from the VioletTek system; composition is new. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--font-body);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;color:inherit}
img{display:block;max-width:100%}
a{color:#fff;text-decoration:none;transition:color .18s ease,opacity .18s ease}
a:hover{color:var(--on-dark)}
::selection{background:var(--crimson);color:#fff}
:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px;border-radius:2px}
.skip{position:fixed;left:-9999px;top:0;background:var(--text-inverse);color:var(--ink);padding:12px 18px;z-index:999}
.skip:focus{left:16px;top:12px;color:var(--ink)}