/* ============================================================================ tokens.css — Axiometa Inventory Manager design tokens Direction: Tally Last updated: 2026-05-12 Drop this file into your project as the SINGLE source of truth for color, type, spacing, radius, shadow, motion, and z-index. Conventions: - Tokens are CSS custom properties on :root. - PRIMITIVE tokens live in the top block (e.g. --ink-800, --brand-500). Do not reference these directly in component CSS — they exist to feed the SEMANTIC roles below. - SEMANTIC roles (e.g. --color-fg-default, --color-bg-surface) are the ONLY tokens components.css should read from. This is what lets us re-skin (dark mode, brand swap) without touching component CSS. - Dark mode is a media-query override of the semantic layer at the bottom. ============================================================================ */ :root { color-scheme: light; /* ─── PRIMITIVES ─────────────────────────────────────────────────────── */ /* Brand — purple. Used for primary actions, links, focus, selection. */ --brand-50: #F4F0FF; --brand-100: #E7DEFF; --brand-200: #CDBCFF; --brand-300: #A48BFF; --brand-400: #8B6BFF; --brand-500: #7C5CFF; /* DEFAULT */ --brand-600: #6446DB; --brand-700: #4D34AB; --brand-800: #382578; --brand-900: #1F1450; /* Ink — UI text and surface ramps. Slight purple bias so neutrals harmonise with the brand. */ --ink-50: #F6F4FB; --ink-100: #ECE9F4; --ink-150: #E2DEEF; --ink-200: #D8D2E6; --ink-300: #B6ADCC; --ink-400: #8A809F; --ink-500: #635A7A; --ink-600: #463E5C; --ink-700: #2E2745; --ink-800: #1B1530; --ink-900: #0F0A1E; /* Semantic primitives */ --success-50: #E8F8EF; --success-100: #C9EED9; --success-500: #1A8054; --success-600: #146640; --success-700: #0F4E32; --warning-50: #FDF5E0; --warning-100: #FAE4B3; --warning-500: #C77418; --warning-600: #A35D0F; --warning-700: #7A440B; --danger-50: #FCE6EC; --danger-100: #FBC9D7; --danger-500: #B82E5C; --danger-600: #971F47; --danger-700: #771733; --info-50: #E5EEFB; --info-100: #C6D8F1; --info-500: #244D85; --info-600: #1A3D6A; --info-700: #122E50; /* ─── SEMANTIC ROLES (light mode) ────────────────────────────────────── */ /* Page-level backgrounds */ --color-bg-page: var(--ink-50); /* outermost canvas */ --color-bg-surface: #FFFFFF; /* cards, popovers, sheets */ --color-bg-sunken: var(--ink-100); /* table headers, code, inset */ --color-bg-overlay: rgba(15, 10, 30, 0.55); /* modal scrim */ /* Borders */ --color-border-subtle: rgba(27, 21, 48, 0.06); --color-border-default: rgba(27, 21, 48, 0.12); --color-border-strong: rgba(27, 21, 48, 0.22); --color-border-focus: var(--brand-500); /* Foreground (text + icons) */ --color-fg-default: var(--ink-800); /* body, headings */ --color-fg-secondary: var(--ink-600); /* sub-text, labels */ --color-fg-muted: var(--ink-400); /* meta, placeholders, captions */ --color-fg-disabled: var(--ink-300); --color-fg-on-brand: #FFFFFF; --color-fg-on-emphasis: #FFFFFF; --color-fg-brand: var(--brand-600); /* "link" text on light bg */ --color-fg-link: var(--brand-600); /* Action / brand */ --color-action-bg: var(--brand-500); --color-action-bg-hover: var(--brand-600); --color-action-bg-active: var(--brand-700); --color-action-bg-subtle: var(--brand-50); --color-action-fg: #FFFFFF; --color-action-fg-on-subtle: var(--brand-700); /* Status text + backgrounds */ --color-success-fg: var(--success-700); --color-success-bg: var(--success-50); --color-success-border: var(--success-500); --color-warning-fg: var(--warning-700); --color-warning-bg: var(--warning-50); --color-warning-border: var(--warning-500); --color-danger-fg: var(--danger-700); --color-danger-bg: var(--danger-50); --color-danger-border: var(--danger-500); --color-info-fg: var(--info-700); --color-info-bg: var(--info-50); --color-info-border: var(--info-500); /* Stock-health (domain-specific semantic) */ --color-stock-ok: var(--success-500); --color-stock-watch: var(--warning-500); --color-stock-low: var(--danger-500); --color-stock-out: var(--danger-700); /* Focus ring — used by every interactive element. 3px @ 35% brand reads against all of our backgrounds and passes WCAG 1.4.11 non-text contrast. */ --focus-ring: 0 0 0 3px rgba(124, 92, 255, 0.45); --focus-ring-danger: 0 0 0 3px rgba(184, 46, 92, 0.45); --focus-ring-offset: #FFFFFF; /* ─── TYPOGRAPHY ─────────────────────────────────────────────────────── */ --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — pixel values. Line-heights are unitless so they cascade. */ --fs-xs: 11px; --lh-xs: 1.4; --fs-sm: 12px; --lh-sm: 1.45; --fs-md: 14px; --lh-md: 1.5; --fs-lg: 16px; --lh-lg: 1.5; --fs-xl: 18px; --lh-xl: 1.4; --fs-2xl: 22px; --lh-2xl: 1.3; --fs-3xl: 28px; --lh-3xl: 1.2; --fs-4xl: 36px; --lh-4xl: 1.1; --fs-5xl: 48px; --lh-5xl: 1.05; --fs-6xl: 64px; --lh-6xl: 1.0; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Tracking */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* eyebrow / uppercase labels */ /* ─── SPACING — 4px base ─────────────────────────────────────────────── */ --sp-0: 0; --sp-px: 1px; --sp-0_5: 2px; --sp-1: 4px; --sp-1_5: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ─── RADIUS ─────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* default for inputs, buttons */ --radius-lg: 14px; /* default for cards */ --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; /* ─── BORDER WIDTHS ──────────────────────────────────────────────────── */ --border-width-1: 1px; --border-width-2: 2px; --border-width-3: 3px; /* ─── SHADOWS ────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 0 rgba(27, 21, 48, 0.04); --shadow-sm: 0 1px 0 rgba(27, 21, 48, 0.04), 0 2px 6px rgba(27, 21, 48, 0.05); --shadow-md: 0 2px 0 rgba(27, 21, 48, 0.04), 0 8px 24px rgba(27, 21, 48, 0.08); --shadow-lg: 0 4px 0 rgba(27, 21, 48, 0.05), 0 16px 40px rgba(27, 21, 48, 0.10); --shadow-xl: 0 8px 0 rgba(27, 21, 48, 0.06), 0 30px 80px rgba(27, 21, 48, 0.18); --shadow-popover: 0 12px 32px rgba(27, 21, 48, 0.14), 0 2px 6px rgba(27, 21, 48, 0.08); --shadow-inset: inset 0 1px 2px rgba(27, 21, 48, 0.08); /* ─── MOTION ─────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms; /* ─── Z-INDEX ────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-nav: 300; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; --z-tooltip: 1300; /* ─── BREAKPOINTS (reference only — use in media queries) ────────────── */ /* xs: < 480px — single-column mobile */ /* sm: >= 480px — comfortable mobile, sheets */ /* md: >= 768px — tablet, two-pane */ /* lg: >= 1024px — desktop default */ /* xl: >= 1280px — wide desktop, dense tables */ /* 2xl: >= 1536px — XL workstation */ /* ─── LAYOUT CONSTANTS ───────────────────────────────────────────────── */ --nav-height-desktop: 56px; --nav-height-mobile: 56px; /* bottom tab bar */ --tabbar-height: 48px; /* sub-nav under main nav */ --content-max-width: 1440px; /* primary content gutter */ --sidebar-width: 260px; } /* ─── DARK MODE ────────────────────────────────────────────────────────── */ /* Override ONLY the semantic layer. Primitives stay the same so we don't inadvertently change brand identity. Auto dark is desktop-only: mobile widths keep the light palette by default because the current dark theme does not read well on small screens. Users can still force dark via data-theme='dark'. */ @media (prefers-color-scheme: dark) and (min-width: 769px) { :root[data-theme='auto'], :root:not([data-theme]) { color-scheme: dark; --color-bg-page: #0F0B1F; --color-bg-surface: #1A1530; --color-bg-sunken: #15102A; --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-default: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.22); --color-fg-default: #F6F4FB; --color-fg-secondary: rgba(246, 244, 251, 0.72); --color-fg-muted: rgba(246, 244, 251, 0.48); --color-fg-disabled: rgba(246, 244, 251, 0.28); --color-fg-on-brand: #FFFFFF; --color-fg-brand: var(--brand-300); --color-fg-link: var(--brand-300); --color-action-bg: var(--brand-500); --color-action-bg-hover: var(--brand-400); --color-action-bg-active: var(--brand-300); --color-action-bg-subtle: rgba(124, 92, 255, 0.18); --color-action-fg-on-subtle: var(--brand-200); --color-success-fg: #6FDDA0; --color-success-bg: rgba(26, 128, 84, 0.18); --color-warning-fg: #F3B756; --color-warning-bg: rgba(199, 116, 24, 0.18); --color-danger-fg: #F38FB0; --color-danger-bg: rgba(184, 46, 92, 0.18); --color-info-fg: #8FB5F0; --color-info-bg: rgba(36, 77, 133, 0.22); --color-stock-ok: #4DC288; --color-stock-watch: #E0A04A; --color-stock-low: #ED6E92; --color-stock-out: #C24268; --focus-ring: 0 0 0 3px rgba(124, 92, 255, 0.55); --focus-ring-offset: #1A1530; --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 0 rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 0 rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); } } /* Manual override — let users (or sub-pages) opt in to a theme regardless of OS */ :root[data-theme='dark'] { color-scheme: dark; --color-bg-page: #0F0B1F; --color-bg-surface: #1A1530; --color-bg-sunken: #15102A; --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-default: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.22); --color-fg-default: #F6F4FB; --color-fg-secondary: rgba(246, 244, 251, 0.72); --color-fg-muted: rgba(246, 244, 251, 0.48); --color-fg-disabled: rgba(246, 244, 251, 0.28); --color-fg-brand: var(--brand-300); --color-fg-link: var(--brand-300); --color-action-bg-subtle: rgba(124, 92, 255, 0.18); --color-action-fg-on-subtle: var(--brand-200); --color-success-fg: #6FDDA0; --color-success-bg: rgba(26, 128, 84, 0.18); --color-warning-fg: #F3B756; --color-warning-bg: rgba(199, 116, 24, 0.18); --color-danger-fg: #F38FB0; --color-danger-bg: rgba(184, 46, 92, 0.18); --color-info-fg: #8FB5F0; --color-info-bg: rgba(36, 77, 133, 0.22); --color-stock-ok: #4DC288; --color-stock-watch: #E0A04A; --color-stock-low: #ED6E92; --color-stock-out: #C24268; --focus-ring-offset: #1A1530; } /* Reduced motion — disable scale + slide transitions, keep opacity for clarity */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-normal: 1ms; --dur-slow: 1ms; } }