/* ============================================================================ Muscat Tech Solutions — Signature Management System Design tokens. Sourced from CLAUDE_DESIGN_PROMPT.md Appendix C, expressed in OKLch so both themes derive from the same hue anchors. ========================================================================== */ /* The webfonts are linked from each document's (see tools/build-pages.cjs) rather than @import-ed here. An @import inside a linked stylesheet cannot be discovered by the preload scanner, so it costs an extra serialised round trip before any text can paint. The stacks below name real fallbacks, so a blocked or offline font request degrades to system faces instead of invisible text. */ :root { /* --- third-party brand marks ------------------------------------------ Microsoft's own brand colours, in sRGB hex because that is how Microsoft specifies them. These are the only fixed colours in the system: they are deliberately outside the theme, because a brand mark that shifts hue between light and dark mode is no longer that brand's mark. Never reuse them for anything that is not the Microsoft logo. */ --brand-ms-red: #F25022; --brand-ms-green: #7FBA00; --brand-ms-blue: #00A4EF; --brand-ms-yellow: #FFB900; /* --- brand + semantic hues ------------------------------------------- */ --accent: oklch(0.635 0.190 45); /* #EA5B0C brand orange */ --accent-hover: oklch(0.552 0.166 45); /* #C74E0A */ --accent-soft: oklch(0.960 0.030 45); --accent-fg: oklch(0.995 0 0); --success: oklch(0.530 0.120 160); /* #128A5B */ --success-soft: oklch(0.958 0.032 160); --warning: oklch(0.612 0.118 75); /* #B7791F manual review */ --warning-soft: oklch(0.962 0.045 75); --danger: oklch(0.512 0.190 27); /* #C62828 reject / fraud */ --danger-soft: oklch(0.958 0.030 27); --info: oklch(0.552 0.170 255); /* #1E6FD9 */ --info-soft: oklch(0.958 0.028 255); /* --- neutrals: 70-90% of every screen -------------------------------- */ --bg: oklch(0.977 0.001 260); /* #F7F7F8 app canvas */ --surface: oklch(1 0 0); /* cards */ --surface-2: oklch(0.988 0.001 260); /* nested / table zebra */ --surface-3: oklch(0.962 0.002 260); /* rails, headers */ --fg: oklch(0.212 0 0); /* #1A1A1A */ --muted: oklch(0.444 0.029 258); /* #4B5563 */ --faint: oklch(0.610 0.020 258); /* tertiary / meta */ --border: oklch(0.912 0.005 258); /* #E5E7EB */ --border-strong: oklch(0.855 0.007 258); /* --- elevation ------------------------------------------------------- */ --shadow-sm: 0 1px 2px oklch(0.21 0 0 / 0.05); --shadow-md: 0 1px 2px oklch(0.21 0 0 / 0.05), 0 4px 12px oklch(0.21 0 0 / 0.06); --shadow-lg: 0 2px 4px oklch(0.21 0 0 / 0.05), 0 12px 32px oklch(0.21 0 0 / 0.10); --ring: 0 0 0 3px oklch(0.635 0.190 45 / 0.28); /* --- geometry -------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-full: 999px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --rail-w: 244px; --rail-w-collapsed: 60px; --topbar-h: 56px; /* --- type ------------------------------------------------------------ */ --font-display: 'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --t-display: 30px; --t-h1: 21px; --t-h2: 17px; --t-h3: 15px; --t-body: 14px; --t-sm: 13px; --t-xs: 11.5px; --motion: 180ms cubic-bezier(0.32, 0.72, 0, 1); } /* Arabic / RTL raises the base a notch — Plex Arabic runs optically smaller. */ [dir="rtl"] { --font-display: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; --t-body: 15px; --t-sm: 14px; } /* --- dark theme: surfaces invert, accent holds, semantics gain luminance -- */ [data-theme="dark"] { --bg: oklch(0.178 0.004 265); /* #0E0F11 */ --surface: oklch(0.222 0.005 265); /* #17181B */ --surface-2: oklch(0.248 0.005 265); --surface-3: oklch(0.278 0.006 265); --fg: oklch(0.958 0.002 260); /* #F3F4F6 */ --muted: oklch(0.755 0.012 258); --faint: oklch(0.640 0.014 258); --border: oklch(1 0 0 / 0.10); --border-strong: oklch(1 0 0 / 0.18); --accent: oklch(0.700 0.175 46); --accent-hover: oklch(0.760 0.160 46); --accent-soft: oklch(0.700 0.175 46 / 0.16); --accent-fg: oklch(0.160 0.020 45); --success: oklch(0.720 0.135 160); --success-soft: oklch(0.720 0.135 160 / 0.16); --warning: oklch(0.790 0.130 78); --warning-soft: oklch(0.790 0.130 78 / 0.16); --danger: oklch(0.690 0.175 25); --danger-soft: oklch(0.690 0.175 25 / 0.16); --info: oklch(0.710 0.140 250); --info-soft: oklch(0.710 0.140 250 / 0.16); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 1px 2px oklch(0 0 0 / 0.40), 0 4px 12px oklch(0 0 0 / 0.35); --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.40), 0 12px 32px oklch(0 0 0 / 0.50); --ring: 0 0 0 3px oklch(0.700 0.175 46 / 0.36); } /* --- layer scale --------------------------------------------------------- Declared on :root of its own so the scale reads as one list. */ :root { /* --------------------------------------------------------------------------- Every stacked surface reads its depth from here rather than picking a number at the point of use. The order is the order things sit in front of each other, and the gaps leave room to slot something in without renumbering: sticky pinned table headers and first columns chrome top bar, launcher header rail the navigation rail — above the chrome, BELOW a scrim, so a dialog opened while the mobile drawer is out is not buried by it menu dropdowns hung off the chrome switcher the state-preview pill flow the guided-flow panel scrim modal and drawer backdrops modal the dialog itself, and the drawer toast confirmations, which must outrank a dialog tooltip a label about something else — always on top of what it explains skip the keyboard skip link, first thing in the document and last word */ --z-sticky: 2; --z-chrome: 20; --z-rail: 60; --z-menu: 80; --z-switch: 70; --z-flow: 85; --z-scrim: 90; --z-modal: 91; --z-toast: 120; --z-tooltip: 150; --z-skip: 200; } /* --- density control: ops users toggle this from the top bar ------------- */ [data-density="compact"] { --row-h: 34px; --cell-y: 6px; } [data-density="cosy"] { --row-h: 44px; --cell-y: 11px; } :root { --row-h: 44px; --cell-y: 11px; } @media (prefers-reduced-motion: reduce) { :root { --motion: 1ms linear; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }