/* ========================================================================= M-Convert · tokens.css ------------------------------------------------------------------------- Purpose : Single source of truth for every design decision that repeats. Scope : Custom properties only. No element selectors. No layout rules. Order : Must be loaded FIRST, before every other stylesheet. Author : M-Convert Licence : MIT ========================================================================= */ /* ------------------------------------------------------------------------- 1. ROOT TOKEN LAYER ------------------------------------------------------------------------- */ :root { /* ---- Colour: surfaces ------------------------------------------------ */ --c-bg: #ffffff; /* page background */ --c-bg-alt: #f7f9fb; /* subtle panel / zebra */ --c-bg-sunken: #eef2f6; /* table header / wells */ --c-surface: #ffffff; /* cards, converter shell */ --c-surface-raised: #ffffff; /* floating layer */ --c-overlay: rgba(11, 34, 57, 0.55); /* modal scrim */ /* ---- Colour: text ---------------------------------------------------- */ --c-text: #0b2239; /* primary body text (navy-900) */ --c-text-strong: #08202f; /* highest emphasis */ --c-text-muted: #52657a; /* secondary text */ --c-text-subtle: #74879b; /* tertiary / captions */ --c-text-invert: #ffffff; /* on dark surfaces */ /* ---- Colour: brand --------------------------------------------------- */ --c-brand: #143a5a; /* navy — wordmark, headings */ --c-brand-hover: #0e2b45; --c-brand-active: #0a2237; /* ---- Colour: accent (teal) ------------------------------------------ */ --c-accent: #0b6e7d; /* primary interactive */ --c-accent-hover: #095a66; --c-accent-active: #074a54; --c-accent-tint: #e6f4f6; /* chips, focus halo */ --c-accent-tint-2: #d3eaee; /* ---- Colour: borders ------------------------------------------------- */ --c-border: #e2e8f0; /* default hairline */ --c-border-strong: #cbd5e1; /* emphasised divider */ --c-border-input: #c4d0dc; /* form field */ /* ---- Colour: semantic ------------------------------------------------ */ --c-error: #b3261e; --c-error-tint: #fdecea; --c-error-border: #f3b7b3; --c-success: #146c43; --c-success-tint: #e7f5ee; --c-success-border: #a9d9be; --c-warning: #8a5a00; --c-warning-tint: #fff4e0; --c-info: #0b5f8a; --c-info-tint: #e6f2f9; /* ---- Colour: focus --------------------------------------------------- */ --c-focus: #0b6e7d; --c-focus-ring: rgba(11, 110, 125, 0.35); /* ---- Colour: shadow base -------------------------------------------- */ --c-shadow: rgba(11, 34, 57, 0.08); --c-shadow-2: rgba(11, 34, 57, 0.12); --c-shadow-3: rgba(11, 34, 57, 0.18); /* ------------------------------------------------------------------------- 2. TYPOGRAPHY ------------------------------------------------------------------------- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* Fluid type scale — min at 320 px, max at 1440 px */ --fs-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11 → 12 */ --fs-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem); /* 12 → 13 */ --fs-sm: clamp(0.8125rem,0.79rem + 0.18vw, 0.875rem); /* 13 → 14 */ --fs-base: clamp(0.9375rem,0.91rem + 0.22vw, 1rem); /* 15 → 16 */ --fs-md: clamp(1rem, 0.96rem + 0.28vw, 1.125rem); /* 16 → 18 */ --fs-lg: clamp(1.125rem, 1.06rem + 0.42vw, 1.375rem); /* 18 → 22 */ --fs-xl: clamp(1.3125rem,1.19rem + 0.70vw, 1.75rem); /* 21 → 28 */ --fs-2xl: clamp(1.625rem, 1.40rem + 1.20vw, 2.375rem); /* 26 → 38 */ --fs-3xl: clamp(1.875rem, 1.50rem + 1.90vw, 3rem); /* 30 → 48 */ --fs-4xl: clamp(2.125rem, 1.60rem + 2.60vw, 3.5rem); /* 34 → 56 */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.06em; --measure: 68ch; /* comfortable reading line length */ --measure-narrow:56ch; --measure-wide: 82ch; /* ------------------------------------------------------------------------- 3. SPACING (4 px base) ------------------------------------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 1.75rem; /* 28 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-14: 3.5rem; /* 56 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ /* ------------------------------------------------------------------------- 4. RADII ------------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; --r-circle: 50%; /* ------------------------------------------------------------------------- 5. SHADOWS ------------------------------------------------------------------------- */ --sh-xs: 0 1px 2px var(--c-shadow); --sh-sm: 0 1px 3px var(--c-shadow), 0 1px 2px var(--c-shadow); --sh-md: 0 4px 10px -2px var(--c-shadow-2), 0 2px 4px -2px var(--c-shadow); --sh-lg: 0 10px 24px -6px var(--c-shadow-2), 0 4px 8px -4px var(--c-shadow); --sh-xl: 0 20px 40px -12px var(--c-shadow-3), 0 8px 16px -8px var(--c-shadow-2); --sh-focus: 0 0 0 3px var(--c-focus-ring); --sh-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* ------------------------------------------------------------------------- 6. BORDERS ------------------------------------------------------------------------- */ --bd-hairline: 1px solid var(--c-border); --bd-input: 1px solid var(--c-border-input); --bd-strong: 2px solid var(--c-border-strong); /* ------------------------------------------------------------------------- 7. MOTION ------------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* ------------------------------------------------------------------------- 8. LAYOUT ------------------------------------------------------------------------- */ --w-page-max: 1200px; --w-content-max: 860px; --w-converter-max:720px; --w-prose-max: 68ch; --header-h: 64px; --header-h-lg: 72px; --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 350; --z-toast: 400; --z-skip: 500; /* ------------------------------------------------------------------------- 9. COMPONENT TOKENS ------------------------------------------------------------------------- */ --btn-h-sm: 36px; --btn-h-md: 44px; /* meets the 44 × 44 touch target */ --btn-h-lg: 52px; --btn-px-sm: var(--sp-3); --btn-px-md: var(--sp-5); --btn-px-lg: var(--sp-6); --input-h: 52px; --input-px: var(--sp-4); --input-radius: var(--r-md); --card-pad: var(--sp-5); --card-pad-lg: var(--sp-6); --card-radius: var(--r-lg); --container-px: var(--sp-4); --section-py: var(--sp-12); --section-py-lg:var(--sp-20); --table-cell-py: var(--sp-3); --table-cell-px: var(--sp-4); --focus-ring-w: 3px; --focus-ring-o: 2px; } /* ------------------------------------------------------------------------- 10. MEDIUM-VIEWPORT TOKEN ADJUSTMENTS ------------------------------------------------------------------------- */ @media (min-width: 640px) { :root { --container-px: var(--sp-6); --section-py: var(--sp-16); } } @media (min-width: 1024px) { :root { --container-px: var(--sp-8); --section-py: var(--sp-20); --section-py-lg:var(--sp-24); --card-pad: var(--sp-6); } } /* ------------------------------------------------------------------------- 11. REDUCED MOTION ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; } } /* ------------------------------------------------------------------------- 12. HIGH CONTRAST PREFERENCE ------------------------------------------------------------------------- */ @media (prefers-contrast: more) { :root { --c-text: #000000; --c-text-muted: #24313f; --c-text-subtle: #33465a; --c-border: #6b7a8a; --c-border-input: #4d5c6c; --c-accent: #064651; --c-accent-hover: #04333b; --c-error: #8a1208; --c-success: #0a4a2c; --sh-focus: 0 0 0 3px #000000; } } /* ------------------------------------------------------------------------- 13. DARK-MODE OPT-OUT ------------------------------------------------------------------------- The brand is a deliberately light, high-contrast clinical interface. We declare `color-scheme: light` so the browser does not auto-invert form controls or scrollbars, which would break the visual identity and the measured contrast ratios. ------------------------------------------------------------------------- */ :root { color-scheme: light; }