/** * Hesskey App Theme — the PHONE APP's design tokens, ported 1:1 to CSS. * * Source of truth: hesskey-app/src/theme/index.ts (colors, spacing, * borderRadius, typography, shadows). The web app loads this AFTER * hesskey-ui.css and scopes overrides under `.app-theme` so the other * portals (foundation, login-lab) keep the portal look. * * Differences vs hesskey-ui.css to be aware of (deliberate — the web app * mirrors the app, not the portal): background #FAFAF5 (cream, not #FAFAFA), * orange #F57C00 (app secondary, not brand #FF9800), purple #6A1B9A * (app, not brand #7B1FA2), grey text #616161/#9E9E9E. */ :root { /* ── colors (theme/index.ts `colors`) ── */ --app-green-500: #4CAF50; --app-green-600: #388E3C; --app-green-700: #2E7D32; --app-green-100: #E8F5E9; --app-green-50: #F1F8E9; --app-yellow-500: #FFC107; --app-yellow-600: #FFB300; --app-yellow-700: #FFA000; --app-yellow-100: #FFF8E1; --app-orange-500: #F57C00; --app-orange-600: #FB8C00; --app-orange-700: #EF6C00; --app-orange-100: #FFF3E0; --app-purple-500: #6A1B9A; --app-purple-700: #4A148C; --app-purple-100: #F3E5F5; --app-purple-50: #F8F0FC; --app-teal-500: #00897B; --app-teal-700: #00695C; --app-teal-100: #E0F2F1; --app-blue-500: #1565C0; --app-blue-100: #E3F2FD; --app-bg: #FAFAF5; /* colors.background / cream */ --app-surface: #FFFFFF; --app-text-dark: #212121; --app-text-med: #616161; --app-text-light: #9E9E9E; --app-border: #E0E0E0; --app-disabled: #D1D5DB; --app-success: #4CAF50; --app-warning: #F57C00; --app-error: #D32F2F; --app-info: #6A1B9A; /* ── spacing (px) ── */ --app-sp-xs: 4px; --app-sp-sm: 8px; --app-sp-md: 16px; --app-sp-lg: 24px; --app-sp-xl: 32px; --app-sp-xxl: 48px; /* ── border radius ── */ --app-r-sm: 8px; --app-r-md: 12px; --app-r-lg: 16px; --app-r-xl: 24px; --app-r-full: 9999px; /* ── shadows (RN shadow params → CSS) ── */ --app-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --app-shadow-md: 0 2px 8px rgba(0,0,0,0.08); --app-shadow-lg: 0 4px 16px rgba(0,0,0,0.12); --app-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Scope: pages that mirror the phone app set `class="app-theme"` on . */ body.app-theme { background: var(--app-bg); color: var(--app-text-dark); font-family: var(--app-font); } /* ── typography scale (theme/index.ts `typography`) ── */ .app-theme .t-hero { font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -0.5px; } .app-theme .t-h1 { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.3px; } .app-theme .t-h2 { font-size: 20px; font-weight: 600; line-height: 28px; } .app-theme .t-h3 { font-size: 17px; font-weight: 600; line-height: 24px; } .app-theme .t-body { font-size: 15px; font-weight: 400; line-height: 22px; } .app-theme .t-body-bold { font-size: 15px; font-weight: 600; line-height: 22px; } .app-theme .t-caption { font-size: 13px; font-weight: 400; line-height: 18px; } .app-theme .t-label { font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.5px; text-transform: uppercase; } /* ── app surface card (phone Card look: surface + radius-lg + shadow-md) ── */ .app-theme .app-card { background: var(--app-surface); border-radius: var(--app-r-lg); box-shadow: var(--app-shadow-md); padding: var(--app-sp-md); }