/* ============================================================ * Design tokens — single source of truth for visual decisions. * Source: MODEC Figma "Foundations" library (file WsYicAM0yDVpmCdZmgVBg4). * Sync via: Figma MCP get_design_context — see docs/handbook/design-system.md. * * Do NOT add hard-coded hex/font/spacing values to feature CSS; * consume semantic tokens via var(--color-...), var(--font-...), var(--space-...). * * Extraction date: 2026-05-29. * Values marked "extracted" came directly from Foundations frames. * Values marked "deviation:" were synthesized — see deviations table in handbook. * ============================================================ */ /* Cascade layer order — lowest priority → highest. * Declared once here (first stylesheet loaded by index.html); every * other CSS file only contributes to its named layer. Layer order in * this declaration — NOT source order — determines precedence. */ @layer tokens, base, layout, components, features, utilities; @layer tokens { :root { /* ── Primitives ───────────────────────────────────────────── */ /* Neutrals (extracted: 0, 50, 100, 200, 300, 800. Others: MUI grey scale) */ --c-neutral-0: #ffffff; /* extracted: commons/white */ --c-neutral-50: #fafafa; /* extracted */ --c-neutral-100: #f5f5f5; /* extracted */ --c-neutral-200: #eeeeee; /* extracted */ --c-neutral-300: #e4e4e4; /* extracted */ --c-neutral-400: #c4c4c4; /* deviation: MUI grey-400 — no Figma source */ --c-neutral-500: #9e9e9e; /* deviation: MUI grey-500 */ --c-neutral-600: #757575; /* deviation: MUI grey-600 */ --c-neutral-700: #616161; /* deviation: MUI grey-700 */ --c-neutral-800: #333333; /* extracted */ --c-neutral-900: #212121; /* deviation: MUI grey-900 */ /* Brand (extracted: 500 = primary.main #3f5bff "Ocean Blue". Ramp interpolated in HSL.) */ --c-brand-50: #ebeeff; /* deviation: HSL-interpolated tint of brand-500 */ --c-brand-100: #c9d2ff; /* deviation: HSL-interpolated */ --c-brand-200: #a6b3ff; /* deviation: HSL-interpolated */ --c-brand-300: #8294ff; /* deviation: HSL-interpolated */ --c-brand-400: #5e76ff; /* deviation: HSL-interpolated */ --c-brand-500: #3f5bff; /* extracted: primary.main */ --c-brand-600: #2d45e5; /* deviation: HSL-interpolated shade */ --c-brand-700: #1f35c2; /* deviation: HSL-interpolated shade */ --c-brand-800: #15269f; /* deviation: HSL-interpolated shade */ --c-brand-900: #0d177d; /* deviation: HSL-interpolated shade */ /* Secondary (deviation: added per user direction — no slot in 2026-05-26 spec. Source: secondary.main/dark) */ --c-secondary-100: #f8d6e2; /* deviation: HSL-interpolated tint */ --c-secondary-500: #de326e; /* extracted: secondary.main */ --c-secondary-700: #bd2b5e; /* extracted: secondary.dark */ /* Status (extracted: 500 = main, 700 = dark. 100 = HSL-interpolated tint) */ --c-success-100: #d9f2e6; /* deviation: HSL-interpolated tint */ --c-success-500: #3fc380; /* extracted: success.main */ --c-success-700: #36a66d; /* extracted: success.dark */ --c-warning-100: #ffead1; /* deviation: HSL-interpolated tint */ --c-warning-500: #ff9800; /* extracted: warning.main (Material orange) */ --c-warning-700: #d98100; /* extracted: warning.dark */ --c-danger-100: #ffdada; /* deviation: HSL-interpolated tint */ --c-danger-500: #ff5454; /* extracted: error.main */ --c-danger-700: #d94747; /* extracted: error.dark */ --c-info-100: #dbe2e6; /* deviation: HSL-interpolated tint */ --c-info-500: #607d8b; /* extracted: info.main (Material blue-grey 500) */ --c-info-700: #526a76; /* extracted: info.dark */ /* ── Semantic — surfaces ──────────────────────────────────── */ --color-bg-app: var(--c-neutral-0); /* MODEC look: white main content bg (matches MODEC PPE / Inventory pages) */ --color-bg-surface: var(--c-neutral-0); /* white cards / dialogs / inputs */ --color-bg-surface-alt: var(--c-neutral-50); /* zebra rows, subtle alt */ --color-bg-sidebar: var(--c-neutral-0); /* MODEC look: white sidebar (was --c-neutral-900 dark slate) */ --color-bg-overlay: rgba(0, 0, 0, 0.5); /* deviation: standard modal scrim, no Figma source */ /* ── Semantic — text ──────────────────────────────────────── */ --color-text-primary: var(--c-neutral-900); /* matches Aegis text.primary (~#212121); was --c-neutral-800 */ --color-text-secondary: var(--c-neutral-700); /* matches Aegis text.secondary (~#616161); was --c-neutral-600 */ --color-text-muted: var(--c-neutral-500); /* matches Aegis text.disabled */ --color-text-inverse: var(--c-neutral-0); /* white text on dark surfaces */ --color-text-link: var(--c-brand-500); --color-text-link-hover: var(--c-brand-700); /* ── Semantic — borders ───────────────────────────────────── */ --color-border-subtle: var(--c-neutral-200); --color-border-default: var(--c-neutral-300); --color-border-strong: var(--c-neutral-500); --color-border-focus: var(--c-brand-500); /* focus ring */ --color-divider: var(--c-neutral-300); /* Aegis divider (~#E0E0E0; off by ~4) */ /* ── Chart palette (MODEC house style for bar/line/pie) ────── * Categorical series colors. Use --chart-N (1..6) for ordered * series; chart code maps series index → token. */ --chart-1: #4DBABD; /* teal */ --chart-2: #4596F6; /* blue */ --chart-3: #C932DE; /* magenta */ --chart-4: #3D188F; /* deep purple */ --chart-5: var(--c-warning-500); /* orange */ --chart-6: var(--c-success-500); /* green */ /* ── Semantic — status ────────────────────────────────────── */ --color-success-bg: var(--c-success-100); --color-success-text: var(--c-success-700); --color-warning-bg: var(--c-warning-100); --color-warning-text: var(--c-warning-700); --color-danger-bg: var(--c-danger-100); --color-danger-text: var(--c-danger-700); --color-info-bg: var(--c-info-100); --color-info-text: var(--c-info-700); /* ── Semantic — accent ────────────────────────────────────── */ --color-accent: var(--c-brand-500); /* primary action */ --color-accent-hover: var(--c-brand-600); --color-accent-active: var(--c-brand-700); --color-accent-text: var(--c-neutral-0); /* white text on accent */ /* ── Typography ───────────────────────────────────────────── */ --font-family-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* extracted: Noto Sans primary; system fallback matches current body declaration */ --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* deviation: no Figma mono source */ /* Size scale — full MODEC typography spec verified 2026-05-29 pass 3. */ /* h1=60 / h2=48 / h3=40 / h4=32 / h5=24 / h6=20 */ /* subtitle1=16 / subtitle2=14 / body1=16 / body2=14 */ /* caption=12 / overline=12 */ --font-size-xs: 12px; /* MODEC: caption / overline */ --font-size-sm: 14px; /* MODEC: body2 / subtitle2 */ --font-size-base: 16px; /* MODEC: body1 / subtitle1 */ --font-size-lg: 20px; /* MODEC: h6 */ --font-size-xl: 24px; /* MODEC: h5 */ --font-size-2xl: 32px; /* MODEC: h4 (was 34, corrected) */ --font-size-3xl: 40px; /* MODEC: h3 (was 48, corrected) */ --font-size-4xl: 48px; /* MODEC: h2 (new) */ --font-size-5xl: 60px; /* MODEC: h1 (new) */ --font-weight-light: 300; /* MODEC: h1, h2 */ --font-weight-regular: 400; /* MODEC: h3, h4, h5, subtitle2, body2, caption, overline */ --font-weight-medium: 500; /* MODEC: h6, subtitle1, body1 */ --font-weight-semibold: 600; /* extracted: Noto Sans SemiBold */ --font-weight-bold: 700; /* deviation: standard MUI bold */ /* Line-heights (matches MODEC spec per-variant) */ --line-height-tight: 1.25; /* MODEC: h1 (was 1.2) */ --line-height-normal: 1.5; /* MODEC: body1 */ --line-height-relaxed: 1.66; /* MODEC: caption / overline */ --line-height-h234: 1.33; /* MODEC: h2/h3/h6 */ --line-height-h45: 1.42; /* MODEC: h4/h5/body2 */ --line-height-subtitle1: 1.75; /* MODEC: subtitle1 */ /* ── Spacing & shape ──────────────────────────────────────── */ /* 4px step scale (matches MUI 8x grid; observed gaps 8/24/32 in extracted frames) */ --space-0: 0; --space-1: 4px; --space-2: 8px; /* extracted: gap-[8px] observed */ --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* extracted: gap-[24px] observed */ --space-8: 32px; /* extracted: gap-[32px] observed */ --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radii — base 8px confirmed in Figma swatch corners */ --radius-none: 0; --radius-sm: 4px; /* deviation: half-base */ --radius-md: 8px; /* extracted: Figma borderRadius */ --radius-lg: 12px; /* deviation: 1.5x base */ --radius-xl: 16px; /* deviation: 2x base */ --radius-full: 9999px; /* pill */ --border-width-1: 1px; /* deviation: standard hairline */ --border-width-2: 2px; /* deviation: standard emphasis */ } } /* end @layer tokens */