/*
 * Brand tokens — Alien Tools 2026.
 * Single source of truth for color, typography, and spacing.
 * No 62.5% root trick: 1rem = 16px (browser default).
 */

@font-face {
	font-family: "WarText";
	src: url("../fonts/WarTextExtended.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibmplexsans300.ttf") format("truetype");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibmplexsans400.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibmplexsans500.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibmplexsans600.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibmplexmono400.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibmplexmono500.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}

:root {
	/* Surface */
	--at-canvas:         #000000;
	--at-canvas-landing: #0A0A0A;
	--at-surface:        #0E1012;
	--at-surface-2:      #1F2226;

	/* Text */
	--at-headline:       #F5F5F5;
	--at-highlight:      #FFFFFF;
	--at-body:           #B0B0B0;
	--at-muted:          #6B7177;
	--at-dim-888:        #888888;
	--at-dim-666:        #666666;
	--at-dim-555:        #555555;
	--at-dim-444:        #444444;

	/* Lines */
	--at-divider:        #3A3F44;
	--at-hairline:       rgba(255, 255, 255, 0.08);
	--at-hairline-hover: rgba(255, 255, 255, 0.30);

	/* Functional (preserved, not brand) */
	--at-stock-ok:       #0DB638;
	--at-stock-low:      #E89B16;
	--at-stock-out:      #BB0808;

	/* Typography families */
	--at-font-display: "WarText", "Inter", system-ui, sans-serif;
	--at-font-body:    "IBM Plex Sans", system-ui, sans-serif;
	--at-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Type scale (16px root) */
	--at-fs-micro:     0.6rem;    /* 9.6px  */
	--at-fs-eyebrow:   0.7rem;    /* 11.2px */
	--at-fs-body-sm:   0.875rem;  /* 14px   */
	--at-fs-body:      1rem;      /* 16px   */
	--at-fs-subhead:   1.125rem;  /* 18px   */
	--at-fs-display-l: 1.5rem;    /* 24px   */
	--at-fs-h3:        clamp(1.3rem, 3vw, 1.8rem);
	--at-fs-h2:        clamp(1.8rem, 5vw, 3rem);
	--at-fs-h1:        clamp(2.2rem, 7vw, 4.5rem);

	/* Tracking */
	--at-tracking-tight:   0.02em;
	--at-tracking-default: 0.06em;
	--at-tracking-eyebrow: 0.18em;
	--at-tracking-pill:    0.25em;

	/* Spacing scale (16px base) */
	--at-space-1: 0.25rem;
	--at-space-2: 0.5rem;
	--at-space-3: 0.75rem;
	--at-space-4: 1rem;
	--at-space-5: 1.5rem;
	--at-space-6: 2rem;
	--at-space-7: 3rem;
	--at-space-8: 4rem;

	/* Radius — `xs: 0` is the brand default for inputs/buttons (industrial look);
	 * sm/md kept for surface cards where slight softness is desired. */
	--at-radius-xs: 0;
	--at-radius-sm: 4px;
	--at-radius-md: 8px;

	/* Layout */
	--at-container-max: 1400px;
	--at-content-max:   1200px;

	/* Transitions */
	--at-trans-fast:    0.2s ease;
	--at-trans-default: 0.3s ease;
}