/* ============================================================ BesotWare brand tokens — v2 (dark / terminal / builder) ------------------------------------------------------------ Dark-only by intent. No light mode override. Anchored to the brand assets logo.svg + wordmark.svg. Token names are unprefixed (single-project convention). Feature writers: reference these as var(--name). Never hardcode hex values in component CSS. ============================================================ */ :root { /* ---------- Surfaces (dark scale, deepest first) ---------- */ --surface: #0a0a0a; /* page background, matches logo bg */ --surface-2: #141420; /* raised card */ --surface-3: #1c1c2a; /* progress segment inactive / disabled */ /* ---------- Ink (text scale, all AA on --surface) ---------- */ --ink: #e8e8f4; /* primary body, 16.28:1 on --surface */ --ink-muted: #a8a8c8; /* secondary, 8.57:1 on --surface */ --ink-light: #8a8aae; /* tertiary / hints, 5.97:1 on --surface */ /* ---------- Accents (product mapping) ---------- PocketSteward -> --accent (flagship, neon green) UnbanAI -> --teal (cyan/aqua, distinct from accent) PolicyForge -> --amber (warm amber) */ --accent: #00ff9f; /* neon green from logo, 14.90:1 on --surface */ --teal: #3dd6ff; /* UnbanAI cyan, 11.55:1 on --surface */ --amber: #ffb800; /* PolicyForge amber, 11.41:1 on --surface */ /* ---------- Accent tints (eyebrow pills, selected fills) ---------- Use these for low-opacity backgrounds against --surface. */ --accent-light: rgba(0, 255, 159, 0.10); --teal-light: rgba(61, 214, 255, 0.10); --amber-light: rgba(255, 184, 0, 0.10); /* ---------- Borders (hairline neon, terminal wireframe feel) ---------- */ --border: rgba(0, 255, 159, 0.10); /* default hairline */ --border-strong: rgba(0, 255, 159, 0.22); /* emphasis / focused card */ --border-muted: rgba(232, 232, 244, 0.08); /* neutral divider when neon would be too loud */ /* ---------- Typography ---------- Display + headings + product names + wizard questions = mono. Body / UI = sans. Wordmark itself is the SVG asset. */ --font-display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Sizes (rem-based; 1rem = 16px) */ --font-size-eyebrow: 0.75rem; /* 12px monospace uppercase */ --font-size-small: 0.875rem; /* 14px helper/caption */ --font-size-body: 1rem; /* 16px default */ --font-size-button: 0.9375rem; /* 15px button label */ --font-size-lede: 1.125rem; /* 18px hero lede */ --font-size-h3: 1.25rem; /* 20px card title / product name */ --font-size-h2: 1.75rem; /* 28px section title */ --font-size-h1: 2.5rem; /* 40px page h1 */ --font-size-display: 3.25rem; /* 52px hero display */ --line-height-tight: 1.15; --line-height-snug: 1.35; --line-height-base: 1.55; --line-height-loose: 1.7; --letter-spacing-eyebrow: 0.14em; /* terminal-label feel */ --letter-spacing-tight: -0.02em; /* ---------- Shape ---------- */ --radius-sm: 6px; /* input/small element radius (tighter, terminal) */ --radius-card: 12px; /* slightly tighter than v1 14px */ --radius-pill: 100px; /* button pill */ --border-hairline: 0.5px; --border-thin: 1px; /* ---------- Spacing ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ --space-12: 4.5rem; /* 72 — section vertical padding */ --space-16: 6rem; /* 96 */ --section-padding-y: 4.5rem; /* ---------- Layout ---------- */ --content-max: 1060px; --content-narrow: 720px; --content-hero: 820px; /* ---------- Shadows (minimal in terminal mode) ---------- */ --shadow-sm: 0 1px 0 rgba(0, 255, 159, 0.04) inset, 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-md: 0 1px 0 rgba(0, 255, 159, 0.06) inset, 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 0 rgba(0, 255, 159, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card-hover: 0 1px 0 rgba(0, 255, 159, 0.10) inset, 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 255, 159, 0.18); --shadow-input-focus: 0 0 0 3px rgba(0, 255, 159, 0.18); /* ---------- Glow (selective accent treatment) ---------- Use on: focus rings, brandmark hover, active wizard progress pill, primary CTA hover. Do NOT apply to every button. */ --glow-accent: 0 0 12px rgba(0, 255, 159, 0.40); --glow-accent-soft: 0 0 6px rgba(0, 255, 159, 0.25); --glow-teal: 0 0 12px rgba(61, 214, 255, 0.35); --glow-amber: 0 0 12px rgba(255, 184, 0, 0.35); /* ---------- Background grid (hero + wizard shell only) ---------- Faint dot grid in neon at very low alpha. Compose: background-color: var(--surface); background-image: var(--bg-grid); background-size: var(--bg-grid-size); */ --bg-grid: radial-gradient(circle, rgba(0, 255, 159, 0.06) 1px, transparent 1px); --bg-grid-size: 26px 26px; --bg-grid-lines: linear-gradient(to right, rgba(0, 255, 159, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 255, 159, 0.04) 1px, transparent 1px); /* ---------- Z-index scale ---------- */ --z-base: 1; --z-nav: 50; --z-overlay: 100; --z-modal: 200; /* ---------- Motion ---------- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* ---------- Focus ring ---------- */ --focus-ring-width: 3px; --focus-ring-color: var(--accent); } /* ------------------------------------------------------------ NO @media (prefers-color-scheme) BLOCK. This is intentional. The site is dark-only by brand decision. See BRAND.md "Mode strategy" section. Future opt-in high-contrast accessibility tokens (commented out — do not wire without explicit decision): :root.hc { --ink: #ffffff; --ink-muted: #d8d8e8; --ink-light: #b8b8d0; --border: rgba(0, 255, 159, 0.30); --border-strong: rgba(0, 255, 159, 0.55); } ------------------------------------------------------------ */