/* ========================================================================== tokens.css — MR ANALYSIS 360 · THE "ATLAS" DESIGN LANGUAGE -------------------------------------------------------------------------- The single source of truth for colour, typography, spacing, radius, shadow, motion, layering and component geometry. RULE 1 No other file in this system may hard-code a raw value in any of these categories. Everything reads a token declared here. RULE 2 The palette is locked to the five brand colours in §1. Every other colour is either a documented tint / shade / shift of one of those five, or a functional state colour (danger / success) that is NOT a brand accent and must never be used decoratively. RULE 3 The brand is FLAT. Depth comes from hairlines, warm neutral fields and restrained shadow — never from decorative gradients. RULE 4 §11 is the COMPATIBILITY BRIDGE. It maps the describing vocabulary used by the component layer onto the canonical tokens of §1–§10, so that no component ever has to hard-code a colour or a size. ORIGINALITY Atlas is deliberately NOT a corporate-blue system. It is a warm paper-and- ink identity: a graphite-black ink, a warm paper canvas, a single copper accent and an editorial serif for display type. It is built specifically for MR Analysis 360 and reproduces no other firm's visual identity. ========================================================================== */ :root { /* ====================================================================== 1. BRAND PALETTE — the five locked colours ====================================================================== */ --brand-ink: #14120E; /* Headings, body text, dark surfaces */ --brand-graphite: #5C574C; /* Muted / secondary text — 7.19:1 on white */ --brand-paper: #FAF7F2; /* Page background — warm, not clinical */ --brand-surface: #FFFFFF; /* Cards, header, panels */ --brand-copper: #9C5A28; /* THE single accent: links, CTAs, focus */ /* Warm neutral ramp — every neutral in the system is one of these --------- */ --ink-950: #14120E; --ink-900: #1B1914; --ink-800: #2A2620; --ink-700: #3B362E; --ink-600: #5C574C; --ink-500: #837C6E; --ink-400: #A8A192; --ink-300: #C9C2B3; --ink-200: #DED8CA; --ink-100: #EDE8DC; --ink-50: #F6F3EC; /* Copper ramp ------------------------------------------------------------ */ --copper-700: #5F3312; /* active */ --copper-600: #7A431B; /* hover */ --copper-500: #9C5A28; /* base */ --copper-200: #EDDAC6; /* tint edge */ --copper-100: #F8EFE6; /* tint fill */ /* Functional hues — forms and data signals only, never brand accents ------ */ --hue-danger-700: #7F1422; --hue-danger-500: #A81B2E; --hue-danger-200: #F0B5BE; --hue-danger-100: #FDF2F4; --hue-success-500: #0B6A45; --hue-success-200: #A8D9C2; --hue-success-100: #EAF7F0; /* ====================================================================== 2. SEMANTIC ROLES — derived from the palette; no new hues ====================================================================== */ --color-bg: var(--brand-paper); --color-surface: var(--brand-surface); --color-surface-alt: var(--ink-50); /* faint linen band */ --color-surface-inverse: var(--brand-ink); --color-text: var(--brand-ink); --color-text-muted: var(--brand-graphite); --color-text-inverse: #FFFFFF; --color-text-inverse-muted: var(--ink-300); /* 10.56:1 on --brand-ink */ --color-text-accent: var(--brand-copper); --color-text-disabled: var(--ink-400); /* exempt from contrast */ --color-text-on-accent: #FFFFFF; /* Borders ----------------------------------------------------------------- Three distinct jobs, deliberately not one token: - --color-border decorative hairline only (dividers, card edges). Never the sole visual boundary of a control. - --color-border-strong secondary / decorative emphasis. - --color-border-input THE control boundary. Must clear the 3:1 non-text contrast requirement of WCAG 1.4.11. Measured: 4.14:1 on #FFFFFF, 3.87:1 on #FAF7F2. Do not lighten this value. */ --color-border: var(--ink-100); /* 1.22:1 on white — decorative */ --color-border-strong: var(--ink-200); /* 1.42:1 on white — decorative */ --color-border-input: var(--ink-500); /* 4.14:1 on white — PASSES */ --color-border-inverse: #2E2A22; /* hairline on dark surfaces */ /* Accent ------------------------------------------------------------------ */ --color-accent: var(--brand-copper); --color-accent-hover: var(--copper-600); /* 7.94:1 on white */ --color-accent-active: var(--copper-700); --color-accent-soft: var(--copper-100); /* tint */ --color-accent-soft-border: var(--copper-200); /* decorative tint edge */ --color-accent-contrast: #FFFFFF; /* text / icons on accent */ /* Focus — one mechanism for the whole system, never removed --------------- */ --color-focus: var(--brand-copper); --color-focus-ring: rgba(156, 90, 40, 0.30); --focus-outline-width: 2px; --focus-outline-offset: 2px; --color-scrim: rgba(20, 18, 14, 0.55); /* mobile-menu overlay */ --color-header-scrim: rgba(250, 247, 242, 0.92); /* Functional states — forms and data signals only, never decorative ------- */ --color-danger: var(--hue-danger-500); /* 7.34:1 on white */ --color-danger-text: var(--hue-danger-700); --color-danger-soft: var(--hue-danger-100); --color-danger-border: var(--hue-danger-200); --color-success: var(--hue-success-500); /* 6.64:1 on white */ --color-success-soft: var(--hue-success-100); --color-success-border: var(--hue-success-200); --color-success-ring: rgba(11, 106, 69, 0.20); /* ====================================================================== 3. TYPOGRAPHY ---------------------------------------------------------------------- A deliberate editorial pairing: DISPLAY — "Source Serif 4", a high-clarity transitional serif used for H1–H4 only. It gives the brand the authority of a research publication rather than the flatness of a SaaS template. BODY/UI — "Inter", a neutral, screen-optimised grotesque for every paragraph, label, table and control. Weights 400/500/600/700 are the only weights requested from the CDN, so no heading in this system is ever synthesised (faux) bold. ====================================================================== */ --font-display: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Fluid type scale — no media queries needed for type -------------------- */ --text-h1: clamp(2.5rem, 1.85rem + 3.1vw, 4.25rem); /* 40 → 68px */ --text-h2: clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem); /* 30 → 46px */ --text-h3: clamp(1.375rem, 1.22rem + 0.8vw, 1.875rem); /* 22 → 30px */ --text-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); /* 18 → 21px */ --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 17 → 20px */ --text-body: 1rem; /* 16px */ --text-small: 0.875rem; /* 14px */ --text-caption: 0.8125rem; /* 13px */ --text-eyebrow: 0.75rem; /* 12px */ --lh-tight: 1.06; /* H1 at display sizes */ --lh-heading: 1.18; /* H2–H4 */ --lh-snug: 1.4; /* dense UI text */ --lh-body: 1.65; /* paragraphs */ --lh-relaxed: 1.75; /* long-form prose */ --ls-tight: -0.018em; /* large display headings */ --ls-snug: -0.008em; /* smaller headings */ --ls-normal: 0; --ls-wide: 0.02em; --ls-eyebrow: 0.16em; /* uppercase micro-labels */ --ls-caps: 0.005em; /* uppercase display type */ --measure: 68ch; /* ideal prose line length */ --measure-narrow: 56ch; /* narrow column */ --measure-wide: 78ch; /* lead paragraphs */ /* ====================================================================== 4. SPACING — a 4px base scale. Never invent a spacing value. ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ /* Semantic aliases — prefer these inside components */ --space-xs: var(--space-2); --space-sm: var(--space-3); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --space-2xl: var(--space-12); /* ====================================================================== 5. LAYOUT ====================================================================== */ --container-max: 1200px; /* standard content width */ --container-wide: 1320px; /* full-bleed grid width */ --container-narrow: 720px; /* prose, single-column forms */ --container-text: 760px; /* centred text blocks */ --gutter: clamp(1.25rem, 4vw, 2.5rem); /* 20 → 40px */ --grid-gap: clamp(1.25rem, 2.5vw, 2rem); /* 20 → 32px */ --grid-gap-lg: clamp(1.5rem, 3vw, 2.5rem); /* 24 → 40px */ --section-y: clamp(4rem, 7vw, 7.5rem); /* 64 → 120px */ --section-y-sm: clamp(2.5rem, 4vw, 4rem); /* 40 → 64px */ --section-y-lg: clamp(5rem, 9vw, 9rem); /* 80 → 144px */ --header-h: 4.5rem; /* 72px — base (mobile) header height */ --stack-gap: var(--space-6); --flow-space: var(--space-4); /* ====================================================================== 6. RADII — modest and businesslike. A radius larger than 20px reads as consumer software, so the ladder stops there; pills are reserved for badges, tags and avatars where a pill is semantically expected. ====================================================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; /* buttons, inputs */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; /* feature panels */ --radius-2xl: 20px; /* large media */ --radius-pill: 999px; --radius-circle: 50%; /* ====================================================================== 7. ELEVATION — restrained. Depth is mostly borders, not shadow. The shadows are warm (tinted with the ink hue) rather than neutral grey, which is what keeps them from looking like a default framework. ====================================================================== */ --shadow-xs: 0 1px 2px 0 rgb(20 18 14 / 0.04); --shadow-sm: 0 1px 3px 0 rgb(20 18 14 / 0.06), 0 1px 2px -1px rgb(20 18 14 / 0.04); --shadow-md: 0 4px 14px -3px rgb(20 18 14 / 0.08), 0 2px 6px -2px rgb(20 18 14 / 0.04); --shadow-lg: 0 18px 44px -14px rgb(20 18 14 / 0.14), 0 4px 12px -4px rgb(20 18 14 / 0.05); --shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 0.04); --shadow-focus: 0 0 0 3px var(--color-focus-ring); --shadow-focus-danger: 0 0 0 3px rgb(168 27 46 / 0.22); /* ====================================================================== 8. MOTION ====================================================================== */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --transition-colors: color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); --transition-lift: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); /* ====================================================================== 9. LAYERING — one documented stack; no magic z-index numbers ====================================================================== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-scrim: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600; /* ====================================================================== 10. COMPONENT GEOMETRY ====================================================================== */ --border-hairline: 1px; --border-strong: 2px; --border-accent: 3px; /* inline-start accent edge on sector cards */ --border-accent-lg: 4px; /* inline-start accent edge on case stages */ --icon-sm: 1rem; /* 16px */ --icon-md: 1.25rem; /* 20px */ --icon-lg: 1.5rem; /* 24px — the sprite's native size */ --icon-xl: 2rem; /* 32px */ --icon-stroke: 1.5; /* the sprite's single stroke weight */ --btn-h-sm: 2.25rem; /* 36px */ --btn-h-md: 2.75rem; /* 44px — meets the 44px touch-target minimum */ --btn-h-lg: 3.25rem; /* 52px */ --btn-px: clamp(1.25rem, 2vw, 1.75rem); --field-h: 2.75rem; /* 44px */ --field-px: var(--space-4); --tap-target: 2.75rem; /* 44px accessibility minimum */ /* ====================================================================== 11. COMPATIBILITY BRIDGE — the describing vocabulary ---------------------------------------------------------------------- The component layer describes its needs in plain language ("primary", "heading", "relaxed leading"). This section maps every one of those names onto the canonical tokens above, so components.css, base.css, layout.css and responsive.css contain ZERO raw values. Nothing here introduces a new colour or size: each line is an alias. Declaring them once means the whole site can be re-skinned by editing §1 alone. ====================================================================== */ /* --- Colour aliases --------------------------------------------------- */ --color-primary: var(--brand-ink); /* dark, structural surfaces */ --color-primary-light: var(--ink-800); /* ink hover fill */ --color-primary-active: var(--ink-950); /* ink pressed fill */ --color-secondary: var(--brand-graphite); /* muted text */ --color-surface-muted: var(--ink-50); /* faint neutral fill */ --color-accent-light: var(--color-accent-soft);/* accent tint */ --color-border-hover: var(--ink-300); /* hover hairline */ --color-border-card-hover: var(--ink-300); /* card hover hairline */ --color-inverse-overlay: rgba(255, 255, 255, 0.12); --color-inverse-hairline: rgba(255, 255, 255, 0.08); --color-white: #FFFFFF; /* --- Type-family alias ------------------------------------------------ */ --font-heading: var(--font-display); /* --- Type-scale aliases (UI steps) ------------------------------------ */ --text-xs: 0.75rem; /* 12px — micro labels */ --text-sm: 0.875rem; /* 14px — dense metadata */ --text-body-sm: 0.9375rem; /* 15px — default UI copy */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px — lead-in copy */ --text-xl: 1.25rem; /* 20px — minor titles */ --text-2xl: 1.5rem; /* 24px — statements */ --text-3xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem); /* 28 → 38px */ --text-4xl: clamp(2.125rem, 1.7rem + 2.1vw, 3.25rem); /* 34 → 52px */ --text-5xl: var(--text-h1); /* = H1 */ --text-6xl: clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem); /* 44 → 76px */ /* --- Weight aliases --------------------------------------------------- */ --weight-regular: var(--fw-regular); --weight-medium: var(--fw-medium); --weight-semibold: var(--fw-semibold); --weight-bold: var(--fw-bold); /* --- Leading aliases -------------------------------------------------- */ --leading-tight: var(--lh-tight); --leading-normal: 1.5; --leading-relaxed: var(--lh-body); /* --- Tracking aliases ------------------------------------------------- */ --tracking-tight: var(--ls-tight); --tracking-snug: var(--ls-snug); --tracking-normal: var(--ls-normal); --tracking-wide: 0.05em; --tracking-wider: 0.12em; /* --- Geometry / motion aliases ---------------------------------------- */ --radius-full: var(--radius-pill); --duration-fast: var(--dur-fast); --duration-normal: var(--dur-base); --header-height: var(--header-h); } /* -------------------------------------------------------------------------- BREAKPOINT LADDER (contract) CSS custom properties cannot be used inside @media, so the ladder is declared here as documentation and implemented in responsive.css. Base ....... 320px+ smallest supported phone 375px ...... small-phone refinements (iPhone SE / mini) 414px ...... large phones 640px ...... sm — 2-up minor grids 768px ...... md — tablet: horizontal nav switches on, 2-col grids 1024px ..... lg — desktop: 3–4 col grids, wide header 1280px ..... xl — container reaches its full 1200px max-width 1440px+ .... 2xl — container caps, whitespace grows instead -------------------------------------------------------------------------- */