/**
 * Atlas Labs — Design Tokens
 *
 * Every custom property below implements one token defined in
 * docs/DESIGN_SYSTEM.md. Names and values match that document exactly
 * — do not edit a value here without editing the corresponding row in
 * DESIGN_SYSTEM.md in the same change (docs and code must never
 * drift apart, per CODING_STANDARDS.md#documentation-standards).
 *
 * This file defines tokens only. It contains no element selectors,
 * no component styles — see base.css for element-level usage and
 * UI_COMPONENT_SPECIFICATIONS.md for component-level usage.
 *
 * Never add a value here that isn't in DESIGN_SYSTEM.md, and never
 * use a raw value anywhere else in this theme's CSS when a token
 * below already covers it — see DESIGN_SYSTEM.md#section-20-design-rules.
 *
 * Dark palette (v1.1, authorized by founder 2026-07-12 — see
 * docs/decisions/0003-convert-to-dark-palette.md): a black / white /
 * silver system — neutral near-black backgrounds, layered grays that
 * get LIGHTER as they come forward (bg-primary → bg-secondary →
 * surface-primary → surface-elevated), off-white text, and a silver
 * metallic accent family (matte fills with a satin-gradient sheen on
 * primary controls), echoing the product itself: silver-capped glass
 * vials with black labels. Elevation is surface lightness + hairline
 * borders; shadows are a secondary grounding cue (Section 7 below).
 * Token NAMES are unchanged from the light palette — only values
 * changed — so every component stylesheet re-themes without edits.
 */

:root {

	/* ---------------------------------------------------------------
	 * Section 2 — Color Tokens
	 * ------------------------------------------------------------- */

	/* Foundation palette */
	--color-bg-primary: #131315;
	--color-bg-secondary: #1B1B1E;
	--color-surface-primary: #212124;
	--color-surface-elevated: #27272B;
	--color-border-primary: #333338;
	--color-border-secondary: #6E6E76;
	--color-text-primary: #EDEDEF;
	--color-text-secondary: #C0C0C6;
	--color-text-muted: #8E8E96;
	--color-accent-primary: #CFCFD8;
	--color-accent-hover: #E2E2E8;
	--color-success: #7FBF83;
	--color-warning: #E0A93E;
	--color-error: #E8756B;
	--color-information: #A9A9B2;
	--color-metallic: #A8A8B0;

	/* Silver sheen gradients — the "shiny" half of the matte/shiny
	   metallic language, reserved for primary controls (satin fill with
	   a brighter top edge). Both stay within the silver family; the
	   darkest stop still gives dark button text 10.7:1. */
	--gradient-silver: linear-gradient(180deg, #E6E6EC 0%, #C4C4CC 55%, #D6D6DC 100%);
	--gradient-silver-hover: linear-gradient(180deg, #F2F2F6 0%, #D4D4DA 55%, #E4E4EA 100%);

	/* Deep hero background — one step below bg-primary so the 3D vial
	   (silver cap + rim light) sits on the darkest surface in the
	   system. */
	--color-bg-hero: #0C0C0D;

	/* Document plate — genuinely white, reserved for document-like
	   artifacts rendered as-is (2D skeletal structure diagrams, COA
	   previews) whose black line art has no dark-legible variant. */
	--color-surface-document: #FFFFFF;

	/* Inverse surface — EXPERIMENTAL (2026-07-17): founder is A/B
	   testing whether alternating a section or two to light-on-dark
	   (instead of the site's all-dark default) reads better. Never
	   pure white per founder instruction — #EAEAE9 off-white. Tried on
	   the hero first, moved to .al-home-testing instead (see
	   homepage.css) since the hero was the one section specifically
	   credited in ADR 0003 for the dark conversion's payoff. Safe to
	   remove this token along with that block if the experiment doesn't
	   stick. */
	--color-bg-inverse: #EAEAE9;

	/* Hover colors */
	--color-surface-hover: var(--color-surface-elevated);
	--color-border-hover: var(--color-border-secondary);
	--color-scrollbar-thumb-hover: var(--color-metallic);

	/* Disabled colors */
	--color-surface-disabled: #202023;
	--color-text-disabled: #67676E;
	--color-border-disabled: #333338;

	/* Overlay colors */
	--color-overlay-scrim: rgba(0, 0, 0, 0.60);
	--color-overlay-light: rgba(0, 0, 0, 0.35);

	/* Modal backgrounds */
	--color-modal-background: var(--color-surface-elevated);
	--color-modal-border: #333338;

	/* Input backgrounds */
	--color-input-background: #17171A;
	--color-input-background-focus: #17171A;
	--color-input-background-disabled: var(--color-surface-disabled);

	/* Card backgrounds */
	--color-card-background: #1B1B1E;
	--color-card-background-elevated: #212124;

	/* Table backgrounds */
	--color-table-header-background: var(--color-bg-secondary);
	--color-table-row-background: var(--color-surface-primary);
	--color-table-row-alt-background: #1E1E21;

	/* Badge colors */
	--color-badge-success-background: rgba(127, 191, 131, 0.14);
	--color-badge-success-text: #7FBF83;
	--color-badge-success-border: rgba(127, 191, 131, 0.32);
	--color-badge-warning-background: rgba(224, 169, 62, 0.14);
	--color-badge-warning-text: #E0A93E;
	--color-badge-warning-border: rgba(224, 169, 62, 0.32);
	--color-badge-error-background: rgba(232, 117, 107, 0.14);
	--color-badge-error-text: #E8756B;
	--color-badge-error-border: rgba(232, 117, 107, 0.32);
	--color-badge-neutral-background: #27272B;
	--color-badge-neutral-text: var(--color-text-secondary);
	--color-badge-neutral-border: var(--color-border-primary);

	/* Tooltip colors */
	--color-tooltip-background: var(--color-surface-elevated);
	--color-tooltip-border: #333338;
	--color-tooltip-text: var(--color-text-primary);

	/* Focus colors */
	--color-focus-ring: var(--color-accent-primary);

	/* Selection colors */
	--color-selection-background: rgba(207, 207, 216, 0.20);
	--color-selection-text: var(--color-text-primary);

	/* Scrollbar colors */
	--color-scrollbar-track: var(--color-bg-secondary);
	--color-scrollbar-thumb: #4A4A50;

	/* Divider colors */
	--color-divider-default: #2E2E33;
	--color-divider-emphasis: var(--color-border-secondary);

	/* ---------------------------------------------------------------
	 * Section 3 — Typography Tokens
	 * Primary font: Inter. Fallback: system-ui.
	 * Each type token is exposed as size / weight / letter-spacing /
	 * line-height custom properties, since CSS has no single property
	 * that bundles all four.
	 * ------------------------------------------------------------- */

	--font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--type-display-xl-size: 72px;
	--type-display-xl-weight: 600;
	--type-display-xl-letter-spacing: -0.02em;
	--type-display-xl-line-height: 1.05;

	--type-display-l-size: 56px;
	--type-display-l-weight: 600;
	--type-display-l-letter-spacing: -0.02em;
	--type-display-l-line-height: 1.10;

	--type-h1-size: 40px;
	--type-h1-weight: 600;
	--type-h1-letter-spacing: -0.01em;
	--type-h1-line-height: 1.15;

	--type-h2-size: 32px;
	--type-h2-weight: 600;
	--type-h2-letter-spacing: -0.01em;
	--type-h2-line-height: 1.20;

	--type-h3-size: 24px;
	--type-h3-weight: 600;
	--type-h3-letter-spacing: -0.005em;
	--type-h3-line-height: 1.25;

	--type-h4-size: 20px;
	--type-h4-weight: 600;
	--type-h4-letter-spacing: 0em;
	--type-h4-line-height: 1.30;

	--type-body-large-size: 18px;
	--type-body-large-weight: 400;
	--type-body-large-letter-spacing: 0em;
	--type-body-large-line-height: 1.60;

	--type-body-size: 16px;
	--type-body-weight: 400;
	--type-body-letter-spacing: 0em;
	--type-body-line-height: 1.60;

	--type-body-small-size: 14px;
	--type-body-small-weight: 400;
	--type-body-small-letter-spacing: 0em;
	--type-body-small-line-height: 1.50;

	--type-caption-size: 13px;
	--type-caption-weight: 400;
	--type-caption-letter-spacing: 0.01em;
	--type-caption-line-height: 1.40;

	--type-label-size: 12px;
	--type-label-weight: 500;
	--type-label-letter-spacing: 0.06em;
	--type-label-line-height: 1.40;
	--type-label-transform: uppercase;

	--type-button-size: 15px;
	--type-button-weight: 600;
	--type-button-letter-spacing: 0.01em;
	--type-button-line-height: 1.00;

	--type-nav-size: 14px;
	--type-nav-weight: 500;
	--type-nav-letter-spacing: 0em;
	--type-nav-line-height: 1.40;

	--type-footer-size: 13px;
	--type-footer-weight: 400;
	--type-footer-letter-spacing: 0em;
	--type-footer-line-height: 1.50;

	--type-form-label-size: 13px;
	--type-form-label-weight: 500;
	--type-form-label-letter-spacing: 0.02em;
	--type-form-label-line-height: 1.40;

	/* Font weight tokens */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* ---------------------------------------------------------------
	 * Section 4 — Spacing Scale (fixed 13-step scale)
	 * ------------------------------------------------------------- */

	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-80: 80px;
	--space-96: 96px;
	--space-120: 120px;

	/* ---------------------------------------------------------------
	 * Section 5 — Border Radius Tokens
	 * ------------------------------------------------------------- */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 999px;

	/* ---------------------------------------------------------------
	 * Section 6 — Border System
	 * ------------------------------------------------------------- */

	--border-width-standard: 1px;
	--border-width-heavy: 2px;
	--border-width-focus: 2px;
	--divider-thickness: 1px;

	/* ---------------------------------------------------------------
	 * Section 7 — Shadow System
	 * On the dark palette, elevation is carried primarily by surface
	 * lightness + borders (shadows barely read against near-black).
	 * These deeper values remain as a secondary grounding cue for
	 * genuinely floating elements (dropdowns, modals, hover lifts).
	 * ------------------------------------------------------------- */

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
	--shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60);

	/* ---------------------------------------------------------------
	 * Section 8 — Transition System
	 * ------------------------------------------------------------- */

	--duration-fast: 120ms;
	--duration-standard: 180ms;
	--duration-slow: 280ms;
	--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
	--easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

	/* ---------------------------------------------------------------
	 * Section 9 — Grid System
	 * Breakpoint values themselves are not expressible as custom
	 * properties inside media query conditions in the CSS this theme
	 * targets, so they are documented here for reference and used
	 * literally in media queries elsewhere:
	 * Mobile <768px · Tablet 768–1023px · Laptop 1024–1279px ·
	 * Desktop 1280–1439px · Large desktop ≥1440px.
	 * ------------------------------------------------------------- */

	--container-max-width: 1280px;
	--container-gutter-desktop: var(--space-64);
	--container-gutter-laptop: var(--space-48);
	--container-gutter-tablet: var(--space-32);
	--container-gutter-mobile: var(--space-16);
}