/* * AOS Design Tokens — the code-enforceable source of truth for the * AOS Enterprise Design System & UI/UX Standard (docs/standards/ * design-system-and-ui-ux-standard.md, §3, §9, §13). * * ONE design language, TWO themes. Per the approved brand direction (Option B) * and the founder's clarification, AOS is a single design system, component * library, UX language and brand identity with theme support built in — NOT two * visual identities. Light is the default; Dark is optional. The same brand, * typography, spacing, shape, motion, layout and components apply in both; only * the semantic surface/text/border ROLES resolve to theme-appropriate values. * * The file is layered so this stays true: * Layer 1 — theme-agnostic tokens (brand hues, type, spacing, shape, motion, * layout, z-index). IDENTICAL in both themes = one identity. * Layer 2 — semantic ROLE tokens (surface/text/border/primary-on-surface). * These are the ONLY tokens that change between Light and Dark. * * Consume the Layer-2 role tokens (--aos-surface, --aos-text, --aos-border, * --aos-primary, …) in components — never hard-coded hexes and never the raw * brand hues directly for surfaces — so a component is automatically correct in * both themes with no per-theme code. * * THEME SELECTION * Default (no attribute) → Light. * → Light (explicit). * → Dark. * A theme toggle sets data-theme on and persists the choice; because only * role tokens change, the whole platform re-themes with no layout shift. * * ADOPTION NOTE: defining these custom properties has NO visual effect until a * selector consumes them, so this file is safe to load platform-wide now. Existing * screens keep their current styling until each is deliberately migrated onto the * role tokens, surface by surface, per the design-adoption workstream in ROADMAP.md. * * Reference colour values must be validated for WCAG AA contrast in BOTH themes on * every foreground/background pairing and may be adjusted while preserving identity. */ /* ------------------------------------------------------------------ */ /* Layer 1 — theme-agnostic tokens (identical in Light and Dark) */ /* ------------------------------------------------------------------ */ :root { /* --- Brand hues (the one identity — never change by theme) --- */ --aos-ink: #121212; /* deepest brand neutral */ --aos-teal: #277a71; /* primary brand + primary action */ --aos-teal-strong: #1f635b; /* pressed/hover on light */ --aos-teal-bright: #4fb3a6; /* legible teal on dark surfaces */ --aos-teal-light: #dcedea; /* soft brand surface, selected states, tags */ --aos-gold: #ae8b4e; /* selective premium accent; never a primary action */ --aos-white: #ffffff; /* --- Neutral ramp (used to compose per-theme surfaces) --- */ --aos-slate-900: #14161a; --aos-slate-800: #1c1f24; --aos-slate-700: #4a5357; --aos-slate-500: #6a7276; --aos-slate-300: #b7bfc2; --aos-slate-200: #dde2e4; --aos-slate-100: #eef1f2; --aos-slate-50: #f4f6f6; /* --- Semantic status hues (theme-agnostic base; see role tokens for on-dark) --- */ --aos-success: #26734d; --aos-warning: #a46700; --aos-critical: #b3261e; --aos-information: #245ea8; /* --- Typography --- */ --aos-font-sans: "Aptos", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --aos-font-numeric: "Aptos", "Inter", ui-sans-serif, system-ui, sans-serif; /* tabular numerals for data */ --aos-text-display-xl: 3.25rem; /* 44–56px — public hero only */ --aos-text-display-l: 2.25rem; /* 32–40px — marketing / command-centre overview */ --aos-text-h1: 1.75rem; /* 26–32px — page title */ --aos-text-h2: 1.375rem; /* 20–24px — primary section */ --aos-text-h3: 1.0625rem; /* 16–18px — card / subsection */ --aos-text-body-l: 1.0625rem; /* 17–18px — public explanatory copy */ --aos-text-body: 0.9375rem; /* 14–16px — application content */ --aos-text-body-s: 0.8125rem; /* 12–13px — metadata, captions */ --aos-text-label: 0.8125rem; /* 12–14px — controls, tags, field labels */ --aos-leading-tight: 1.15; --aos-leading-body: 1.45; --aos-leading-relaxed: 1.55; --aos-weight-regular: 400; --aos-weight-medium: 500; --aos-weight-semibold: 600; /* --- Spacing (4px base scale) --- */ --aos-space-1: 4px; --aos-space-2: 8px; --aos-space-3: 12px; --aos-space-4: 16px; --aos-space-5: 24px; --aos-space-6: 32px; --aos-space-7: 48px; /* --- Shape --- */ --aos-radius-sm: 6px; /* inputs, tags */ --aos-radius-md: 12px; /* cards, modals */ --aos-radius-lg: 18px; /* hero / product showcase */ --aos-border-width: 1px; /* --- Control sizes --- */ --aos-control-sm: 32px; /* compact tables */ --aos-control-md: 44px; /* default controls */ --aos-control-lg: 52px; /* prominent / mobile actions */ --aos-icon-sm: 16px; --aos-icon-md: 20px; --aos-avatar-sm: 28px; --aos-avatar-md: 40px; /* --- Motion (150–300ms; respect reduced-motion) --- */ --aos-motion-fast: 150ms; --aos-motion-base: 220ms; --aos-motion-slow: 300ms; --aos-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* --- Layout --- */ --aos-bp-tablet: 768px; --aos-bp-desktop: 1024px; --aos-bp-desktop-wide: 1440px; --aos-content-max: 1600px; --aos-measure: 72ch; /* 65–80 character reading measure */ --aos-sidebar-width: 264px; --aos-grid-gutter: 24px; /* --- Z-index scale --- */ --aos-z-base: 0; --aos-z-sticky: 100; --aos-z-dropdown: 200; --aos-z-drawer: 300; --aos-z-modal: 400; --aos-z-toast: 500; --aos-z-emergency: 600; } /* ------------------------------------------------------------------ */ /* Layer 2 — semantic ROLE tokens: LIGHT theme (default) */ /* Consume these in components. Only these differ between themes. */ /* ------------------------------------------------------------------ */ :root, :root[data-theme="light"] { color-scheme: light; --aos-surface: var(--aos-white); /* page background */ --aos-surface-raised: var(--aos-white); /* cards, panels */ --aos-surface-sunken: var(--aos-slate-50);/* wells, muted areas */ --aos-surface-inverse: var(--aos-ink); /* dark callouts on a light page */ --aos-text: var(--aos-ink); /* primary text */ --aos-text-secondary: var(--aos-slate-700); --aos-text-muted: var(--aos-slate-500); --aos-text-on-primary: var(--aos-white); /* text on a teal action */ --aos-text-inverse: var(--aos-white); --aos-border: var(--aos-slate-200); --aos-border-strong: var(--aos-slate-300); --aos-primary: var(--aos-teal); /* primary action / active nav */ --aos-primary-hover: var(--aos-teal-strong); --aos-primary-soft: var(--aos-teal-light);/* selected/tag surface */ --aos-accent: var(--aos-gold); /* premium accent, milestones */ --aos-focus-ring: var(--aos-teal); --aos-success-fg: var(--aos-success); --aos-warning-fg: var(--aos-warning); --aos-critical-fg: var(--aos-critical); --aos-information-fg: var(--aos-information); --aos-elevation-1: 0 1px 2px rgba(18, 18, 18, 0.06), 0 1px 3px rgba(18, 18, 18, 0.08); --aos-elevation-2: 0 4px 12px rgba(18, 18, 18, 0.08), 0 2px 6px rgba(18, 18, 18, 0.06); } /* ------------------------------------------------------------------ */ /* Layer 2 — semantic ROLE tokens: DARK theme (optional) */ /* Same identity (teal/gold), resolved for dark surfaces. */ /* ------------------------------------------------------------------ */ :root[data-theme="dark"] { color-scheme: dark; --aos-surface: var(--aos-slate-900); --aos-surface-raised: var(--aos-slate-800); --aos-surface-sunken: #0f1114; --aos-surface-inverse: var(--aos-white); --aos-text: #f4f6f6; --aos-text-secondary: var(--aos-slate-300); --aos-text-muted: #8b9296; --aos-text-on-primary: var(--aos-white); --aos-text-inverse: var(--aos-ink); --aos-border: #2a2f35; --aos-border-strong: #3a4048; --aos-primary: var(--aos-teal-bright); /* brighter teal stays legible on dark */ --aos-primary-hover: var(--aos-teal); --aos-primary-soft: rgba(79, 179, 166, 0.16); --aos-accent: var(--aos-gold); /* one identity — gold unchanged */ --aos-focus-ring: var(--aos-teal-bright); /* Status hues nudged brighter for AA contrast on dark surfaces. */ --aos-success-fg: #4caf82; --aos-warning-fg: #d99a3a; --aos-critical-fg: #e5726b; --aos-information-fg: #6ea8e6; --aos-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); --aos-elevation-2: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); } /* Optional: honour the operating-system preference for users who have NOT made an * explicit choice. Light remains the product default; this only applies dark when * the OS asks for it and no data-theme has been set. Enable by preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --aos-surface: var(--aos-slate-900); --aos-surface-raised: var(--aos-slate-800); --aos-surface-sunken: #0f1114; --aos-surface-inverse: var(--aos-white); --aos-text: #f4f6f6; --aos-text-secondary: var(--aos-slate-300); --aos-text-muted: #8b9296; --aos-border: #2a2f35; --aos-border-strong: #3a4048; --aos-primary: var(--aos-teal-bright); --aos-primary-hover: var(--aos-teal); --aos-primary-soft: rgba(79, 179, 166, 0.16); --aos-focus-ring: var(--aos-teal-bright); --aos-success-fg: #4caf82; --aos-warning-fg: #d99a3a; --aos-critical-fg: #e5726b; --aos-information-fg: #6ea8e6; } } @media (prefers-reduced-motion: reduce) { :root { --aos-motion-fast: 0ms; --aos-motion-base: 0ms; --aos-motion-slow: 0ms; } }