/* ================================================================== AITEN Embodied Robot — Design Tokens Single source of truth for colour, type, space, radius, motion. Palette direction: deep-space industrial. Near-black blue-graphite grounds, brushed-aluminium neutrals, and a single cyan light signature sampled from the robot's own accent light and the CMF reference render. ================================================================== */ :root { /* ---------- Ground / surface ramp ---------- */ --c-void: #04070b; /* deepest page ground */ --c-bg: #070b11; /* default page background */ --c-bg-raised: #0b1118; /* raised band, still near-black */ --c-surface: #101822; /* panels, nav chrome */ --c-surface-2: #16202c; /* hover / nested surface */ --c-line: rgba(150, 190, 225, 0.13); --c-line-strong: rgba(150, 200, 240, 0.26); /* ---------- Ink ramp ---------- */ --c-ink: #f2f6fa; /* primary text */ --c-ink-2: #c3ccd6; /* secondary text */ --c-ink-3: #8a97a6; /* muted / captions */ --c-ink-4: #5b6775; /* disabled / micro */ /* ---------- Light signature (the robot's own cyan) ---------- */ --c-accent: #35d3ff; /* primary accent */ --c-accent-dim: #1e93b8; /* pressed / secondary */ --c-accent-soft: rgba(53, 211, 255, 0.12); --c-accent-line: rgba(53, 211, 255, 0.34); /* ---------- Material tokens (echo the CMF) ---------- */ --c-alu: #d9dde2; /* satin aluminium */ --c-deck: #c2c7cc; /* machined deck */ --c-gloss: #0d1013; /* smoked gloss black */ --c-rubber: #0f1216; /* tyres / feet */ --c-band: #12161b; /* sensor band */ /* ---------- Atmosphere ---------- */ --glow-cool: rgba(53, 211, 255, 0.20); --glow-deep: rgba(28, 96, 190, 0.22); --fog: rgba(6, 11, 18, 0.86); --scrim-l: linear-gradient(90deg, rgba(4, 7, 11, 0.82) 0%, rgba(4, 7, 11, 0.58) 20%, rgba(4, 7, 11, 0.24) 36%, rgba(4, 7, 11, 0) 52%); --scrim-r: linear-gradient(270deg, rgba(4, 7, 11, 0.82) 0%, rgba(4, 7, 11, 0.58) 20%, rgba(4, 7, 11, 0.24) 36%, rgba(4, 7, 11, 0) 52%); --scrim-b: linear-gradient(0deg, rgba(4, 7, 11, 0.84) 0%, rgba(4, 7, 11, 0.58) 24%, rgba(4, 7, 11, 0.26) 50%, rgba(4, 7, 11, 0) 78%); --scrim-t: linear-gradient(180deg, rgba(4, 7, 11, 0.82) 0%, rgba(4, 7, 11, 0.58) 24%, rgba(4, 7, 11, 0.26) 50%, rgba(4, 7, 11, 0) 78%); /* Seam wash: feathers an image's top + bottom edges into the page band so full-bleed media reads as part of the ground, not a framed box. */ --seam-t: linear-gradient(180deg, rgba(4, 7, 11, 0.7) 0%, rgba(4, 7, 11, 0.34) 5%, rgba(4, 7, 11, 0.1) 10%, rgba(4, 7, 11, 0) 16%); --seam-b: linear-gradient(0deg, rgba(4, 7, 11, 0.7) 0%, rgba(4, 7, 11, 0.34) 5%, rgba(4, 7, 11, 0.1) 10%, rgba(4, 7, 11, 0) 16%); --seam-l: linear-gradient(90deg, rgba(4, 7, 11, 0.7) 0%, rgba(4, 7, 11, 0.34) 6%, rgba(4, 7, 11, 0.1) 14%, rgba(4, 7, 11, 0) 22%); --seam-r: linear-gradient(270deg, rgba(4, 7, 11, 0.7) 0%, rgba(4, 7, 11, 0.34) 6%, rgba(4, 7, 11, 0.1) 14%, rgba(4, 7, 11, 0) 22%); /* ---------- Legacy aliases (kept for compatibility) ---------- */ --bg: var(--c-bg); --bg2: var(--c-bg-raised); --ink: var(--c-ink); --muted: var(--c-ink-3); --rule: var(--c-line); --accent: var(--c-accent); --accent2: var(--c-accent-dim); --success: #3ddc97; --warning: #ffc46b; --danger: #ff6b6b; /* ---------- Typography ---------- */ --font-sans: "Helvetica Neue", "Inter", "SF Pro Display", -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", "Meiryo", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Consolas", "Roboto Mono", ui-monospace, monospace; /* fluid display sizes — clamp keeps the launch-page scale on every screen */ --fs-hero: clamp(2.6rem, 6.4vw, 7.2rem); --fs-display: clamp(2rem, 5vw, 5rem); --fs-h2: clamp(1.7rem, 3.6vw, 3.4rem); --fs-h3: clamp(1.25rem, 2.3vw, 2.1rem); --fs-lead: clamp(1rem, 1.22vw, 1.28rem); --fs-body: clamp(0.95rem, 1.05vw, 1.06rem); --fs-small: 0.86rem; --fs-micro: 0.72rem; --lh-tight: 1.02; --lh-snug: 1.22; --lh-body: 1.68; --ls-hero: -0.035em; --ls-display: -0.025em; --ls-label: 0.22em; --ls-eyebrow: 0.28em; --ls-nav: 0.14em; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; /* ---------- Space scale ---------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; /* page gutter + fixed chrome heights */ --gutter: clamp(1.25rem, 5vw, 5.5rem); --header-h: 76px; --content-max: 1560px; /* Footprint of the fixed .mobile-jump bar. Zero on desktop (the bar is hidden there); the mobile breakpoint raises it to the real height so bottom-anchored shot copy can reserve room and stay clear of it. */ --jump-bar-h: 0px; /* ---------- Radius (deliberately restrained: this is not a SaaS UI) ---------- */ --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-dramatic: cubic-bezier(0.87, 0, 0.13, 1); --dur-fast: 0.22s; --dur-base: 0.45s; --dur-slow: 0.9s; --dur-cinematic: 1.6s; --dur-epic: 2.4s; /* ---------- Cinematic typography scale ---------- */ --fs-hero: clamp(3.2rem, 12vw, 11rem); --fs-hero-secondary: clamp(1.6rem, 4.5vw, 4rem); --fs-display: clamp(2.4rem, 7vw, 6.5rem); --fs-h2: clamp(1.9rem, 4vw, 3.6rem); --fs-h3: clamp(1.35rem, 2.4vw, 2.2rem); --fs-lead: clamp(1.05rem, 1.35vw, 1.35rem); --fs-body: clamp(0.95rem, 1.05vw, 1.06rem); --fs-small: 0.86rem; --fs-micro: 0.72rem; --fs-dim: clamp(0.75rem, 1vw, 0.88rem); /* ---------- Elevation / depth ---------- */ --z-bg: 0; --z-media: 1; --z-scrim: 2; --z-content: 3; --z-nav: 40; --z-header: 50; --z-overlay: 60; /* ---------- Layered industrial surfaces ---------- */ --hairline: 1px solid var(--c-line); --shadow-deep: 0 30px 90px -30px rgba(0, 0, 0, 0.9); --shadow-glow: 0 0 60px -12px var(--glow-cool); /* ---------- Scroll-driven cinematic layout ---------- */ --section-min-h: 100vh; --section-min-h-svh: 100svh; --section-overlap: clamp(3rem, 12svh, 8rem); --hero-model-scale: 1; --vignette: radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(4, 7, 11, 0.4) 72%, rgba(4, 7, 11, 0.82) 100%); } /* Honour reduced-motion globally at the token layer. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-cinematic: 0.01ms; } }