/* Shared Sorvation surfaces: Procurement, Supplier and local authentication. New blue identity (product redesign phase A, 14 Oct 2026; palette from docs/brand/proposals/identity-new-blue-2026-10-14/palette.css, same values as the live website): cool-gray neutrals, Blue 600 as the single action colour, Ink for text, Manrope for UI and numbers. Signal Cyan is for ink (dark) surfaces only and is not used in the product's light UI. Status colours have fixed meanings: success = done or accepted, warning = deadline or attention, danger = overdue, blocked or rejected, info = in progress or live. Meaning is always carried by text or an icon as well as colour. Scales follow IBM Carbon principles (reference only, no Carbon code): 2x spacing, productive type, productive motion (70-150 ms) and data-table row heights. Variable names are unchanged so every existing consumer moves to the new identity. */ :root { /* Brand blue and ink (website names: --blue-*, --ink). */ --sorvation-blue-50: #ebf1fe; --sorvation-blue-100: #d6e2fd; --sorvation-blue-400: #6a92f5; --sorvation-blue-600: #1f4fd8; --sorvation-blue-700: #1a41b4; --sorvation-blue-800: #173a9e; --sorvation-gray-50: #f6f7f9; --sorvation-gray-100: #eceef2; --sorvation-gray-200: #dce0e7; --sorvation-gray-300: #bec5d0; --sorvation-gray-400: #8e97a6; --sorvation-gray-500: #646d7e; --sorvation-gray-600: #4a5262; --sorvation-gray-700: #343a47; /* Surfaces and text. Ink 0B1A33 is 17.4:1 on White; Gray 600 is 7.9:1. */ --sorvation-background: #f6f7f9; --sorvation-surface: #ffffff; --sorvation-surface-secondary: #f6f7f9; --sorvation-surface-muted: #eceef2; --sorvation-surface-hover: #f1f3f6; --sorvation-surface-selected: #ebf1fe; --sorvation-border: #dce0e7; --sorvation-border-strong: #bec5d0; /* Field borders: 3.8:1 on White (WCAG 1.4.11 non-text contrast). */ --sorvation-field: #7a8494; /* Disclosure rows (Founder review, 15 Oct 2026): every collapsible row is a White surface with this border, 3.5:1 on the Gray 50 page and 3.8:1 on White (WCAG 1.4.11), so it reads as a control. */ --sorvation-disclosure-surface: #ffffff; --sorvation-disclosure-border: #7a8494; --sorvation-disclosure-hover: #ebf1fe; --sorvation-ink: #0b1a33; --sorvation-ink-muted: #4a5262; --sorvation-ink-subtle: #646d7e; /* Actions: Blue 600 is 6.6:1 on White; hover 700 and pressed 800. */ --sorvation-action: #1f4fd8; --sorvation-action-hover: #1a41b4; --sorvation-action-pressed: #173a9e; --sorvation-action-tint: #ebf1fe; --sorvation-focus: #1f4fd8; --sorvation-focus-inset: #ffffff; --sorvation-success: #16794a; --sorvation-warning: #a85a00; --sorvation-danger: #c42f2f; --sorvation-danger-tint: #fcebeb; --sorvation-select-indicator: url('/assets/sorvation-select-chevron.svg'); /* Status palette: tint for backgrounds, ink for text and icons, accent for bars and rules. */ /* Warning: deadline under 48 hours (4.6 on tint, 5.1 on White). */ --sorvation-warning-tint: #fdf2e2; --sorvation-warning-ink: #a85a00; --sorvation-warning-accent: #d98a1f; /* Overdue, blocked, danger (4.8 on tint, 5.6 on White). */ --sorvation-overdue-tint: #fcebeb; --sorvation-overdue-ink: #c42f2f; --sorvation-overdue-accent: #e05252; /* Info, in progress, live (7.5 on tint, 8.5 on White). */ --sorvation-info-tint: #ebf1fe; --sorvation-info-ink: #1a41b4; --sorvation-info-accent: #1f4fd8; /* Success, done (4.8 on tint, 5.4 on White). */ --sorvation-success-tint: #e7f4ec; --sorvation-success-ink: #16794a; --sorvation-success-accent: #2e8b5c; /* Neutral, draft (6.8 on tint, 7.9 on White). */ --sorvation-neutral-tint: #eceef2; --sorvation-neutral-ink: #4a5262; --sorvation-neutral-accent: #8e97a6; /* Highlight, new: the square "New" marker uses Signal Cyan strong (the cyan for white surfaces). */ --sorvation-new-tint: #f3f6fe; --sorvation-new-ink: #0b1a33; --sorvation-new-marker: #0a7fa6; /* Card header bands (Ink text 16 or more). */ --sorvation-band: #f6f7f9; --sorvation-band-warm: #fdf6ea; --sorvation-band-info: #f3f6fe; /* Chart series. Always print values; never rely on colour alone. */ --sorvation-chart-1: #1f4fd8; --sorvation-chart-2: #0a7fa6; --sorvation-chart-3: #d98a1f; --sorvation-chart-4: #7a5aa6; --sorvation-chart-5: #8e97a6; /* Carbon 2x spacing scale. */ --sorvation-space-01: 2px; --sorvation-space-02: 4px; --sorvation-space-03: 8px; --sorvation-space-04: 12px; --sorvation-space-05: 16px; --sorvation-space-06: 24px; --sorvation-space-07: 32px; --sorvation-space-08: 40px; --sorvation-space-09: 48px; --sorvation-space-10: 64px; /* Productive type set (Carbon reference, Manrope): fixed sizes for dense product pages. */ --sorvation-type-label: 600 12px/16px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-helper: 400 12px/16px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-body-compact: 400 14px/18px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-body: 400 14px/20px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-heading-compact: 600 14px/18px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-heading-02: 600 16px/24px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-heading-03: 600 20px/28px 'Manrope Variable', Manrope, system-ui, sans-serif; --sorvation-type-heading-04: 600 28px/36px 'Manrope Variable', Manrope, system-ui, sans-serif; /* Productive motion: micro-interactions 70 ms, fades 110 ms, small expansions 150 ms. */ --sorvation-motion-fast-01: 70ms; --sorvation-motion-fast-02: 110ms; --sorvation-motion-moderate-01: 150ms; --sorvation-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9); --sorvation-ease-entrance: cubic-bezier(0, 0, 0.38, 0.9); --sorvation-ease-exit: cubic-bezier(0.2, 0, 1, 0.9); /* Data tables: Carbon "md" (40 px) by default, "sm" (32 px) when compact. */ --sorvation-row-default: 40px; --sorvation-row-compact: 32px; --sorvation-cell-x: 16px; --sorvation-radius-sm: 4px; --sorvation-radius: 6px; }