/* ============================================================ Blueprint mobile redesign — design tokens blueprintsoftware.ca/blueprint/assets/css/shared/mobile-design-tokens.css Visual-only. Every token is declared ON #mobile-app, not on :root, so the desktop portal (header, .layout, .sidebar, .card, .btn, …) keeps its own --gp/--bg/--t1 values untouched. Values are the Blueprint brand tokens (Slate x Sky) already shipped in /blueprint/assets/brand/blueprint-tokens.css, plus the semantic, spacing, shape, elevation and motion steps the mobile theme needs. No new hues were invented. Load order: design-tokens.css -> mobile-theme.css ============================================================ */ #mobile-app { /* ── Brand ───────────────────────────────────────────────── */ --mob-blue: #0c72cb; /* primary action, active nav, links, focus */ --mob-blue-600: #006ac0; /* hover step */ --mob-blue-700: #005ba6; /* press step */ --mob-sky: #0080cc; --mob-ink: #282e37; /* brand chrome + primary text */ --mob-ink-deep: #171d25; /* status bar */ --mob-slate-1: #6c7680; --mob-slate-2: #495460; /* ── Neutral ramp ────────────────────────────────────────── */ --mob-bg: #f7f9fb; /* app background */ --mob-surface: #ffffff; /* cards, sheets, nav */ --mob-surface-inset: #f2f5f9; /* wells, search field, timer block */ --mob-border: #e4e8ee; --mob-border-strong: #d3d9e2; /* inputs, outline buttons (1.5px) */ --mob-divider: #eef1f5; /* row separators inside a card */ --mob-text: #282e37; --mob-text-secondary: #495460; --mob-text-muted: #66707c; /* 4.9:1 on --mob-surface */ --mob-on-dark: #f3f5f8; --mob-on-dark-muted: rgba(243,245,248,.72); --mob-hover: #eef1f5; /* neutral row/control hover + :active */ --mob-blue-50: #e9f2fb; /* subtle blue surface */ --mob-blue-100: #d3e5f7; /* ── Semantic (status only — never actions) ──────────────── */ --mob-success-bg: #ecfdf3; --mob-success-fg: #15653f; /* 5.4:1 on its bg */ --mob-success-border: #b6e6c9; --mob-warning-bg: #fef6e7; --mob-warning-fg: #8a5300; --mob-warning-border: #f6ddab; --mob-danger-bg: #fdecec; --mob-danger-fg: #b3261e; --mob-danger-border: #f4c3c0; --mob-info-bg: #e6f4f7; --mob-info-fg: #0f5b6b; --mob-info-border: #b7dde5; --mob-neutral-bg: #f1f3f7; --mob-neutral-fg: #495460; --mob-neutral-border: #dfe4ec; /* ── Type ────────────────────────────────────────────────── */ /* Hanken Grotesk is already loaded by every portal page's ; no new font request is introduced. Mono falls back to the platform monospace stack rather than fetching JetBrains Mono. */ --mob-font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mob-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --mob-fs-11: 11px; --mob-fs-12: 12px; --mob-fs-13: 13px; --mob-fs-14: 14px; --mob-fs-15: 15px; --mob-fs-16: 16px; --mob-fs-18: 18px; --mob-fs-20: 20px; --mob-fs-22: 22px; --mob-fs-26: 26px; --mob-fw-body: 500; --mob-fw-label: 600; --mob-fw-title: 700; --mob-fw-display: 800; --mob-track-title: -.3px; /* ── Spacing (4px base) ─────────────────────────────────── */ --mob-space-1: 4px; --mob-space-2: 8px; --mob-space-3: 12px; --mob-space-4: 16px; --mob-space-5: 20px; --mob-space-6: 24px; --mob-gutter: 16px; /* phone page gutter */ /* ── Shape ──────────────────────────────────────────────── */ --mob-radius-chip: 6px; --mob-radius-ctrl: 8px; /* buttons, inputs, nav links */ --mob-radius-stat: 10px; --mob-radius-card: 14px; --mob-radius-sheet: 16px; --mob-radius-pill: 999px; /* ── Elevation (slate-tinted, never black) ──────────────── */ --mob-elev-1: 0 1px 2px rgba(40,46,55,.06); --mob-elev-2: 0 2px 8px rgba(40,46,55,.08); --mob-elev-3: 0 6px 16px rgba(40,46,55,.10); --mob-elev-5: 0 -6px 24px rgba(40,46,55,.12); --mob-elev-sticky: 0 1px 0 rgba(40,46,55,.06); --mob-focus-ring: 0 0 0 3px rgba(12,114,203,.18); --mob-scrim: rgba(27,32,40,.45); /* ── Motion ─────────────────────────────────────────────── */ --mob-dur-hover: 80ms; --mob-dur-press: 120ms; --mob-dur-nav: 160ms; --mob-dur-pop: 200ms; --mob-dur-sheet: 320ms; --mob-ease: cubic-bezier(.2,0,.2,1); --mob-ease-emph: cubic-bezier(.2,0,0,1); /* ── Fixed chrome + safe areas ──────────────────────────── */ --mob-header-h: 56px; --mob-tabbar-h: 56px; --mob-safe-top: env(safe-area-inset-top, 0px); --mob-safe-bottom: env(safe-area-inset-bottom, 0px); --mob-tap-min: 44px; }