/** * EasyWy prototype — theme: colors, typography, spacing, and UI tokens. * * Import this file on every page (before mobile.css) so fonts, colors, and * sizes come from one place. Component/layout rules live in mobile.css. * * Each HTML page should set (e.g. slug matching the file name). * Green shell + primary palette apply to body[data-page]; emerald app bar to all except data-page="home". * Future dark mode: e.g. html[data-theme="dark"] overriding these vars. */ :root { /* —— Layout (shared) —— */ --radius: 12px; --safe-top: env(safe-area-inset-top, 12px); --safe-bottom: env(safe-area-inset-bottom, 16px); /* —— Spacing —— */ --space-0: 0; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px; --gap-grid: 10px; --list-indent: 18px; /* —— Typography —— */ --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-size-root: 16px; --font-weight-medium: 600; --font-weight-bold: 700; /* Type scale by UI section */ --type-html-size: var(--font-size-root); --type-header-btn: 1.25rem; --type-header-title: 1.05rem; --type-header-title-sub: 0.95rem; --type-hint: 0.85rem; --type-tagline: 0.9rem; --type-brand-icon: 2.5rem; --type-brand-heading: 1.75rem; --type-welcome: 1.1rem; --type-form-label: 0.8rem; --type-input: 1rem; --type-button: 1rem; --type-button-weight: var(--font-weight-medium); --type-links-row: 0.9rem; --type-legal: 0.72rem; --type-list-card-body: 0.9rem; --type-main-tile-title: 0.95rem; --type-main-tile-desc: 0.75rem; --type-stat-value: 1.25rem; --type-stat-label: 0.75rem; --type-toolbar-meta: 0.85rem; --type-status-chip: 0.75rem; --type-fab: 1.5rem; --type-tab: 0.8rem; --type-update-banner-title: 0.95rem; --type-update-banner-body: 0.85rem; --type-preview-doc: 0.85rem; --type-preview-table: 0.8rem; --type-radio-desc: 0.85rem; --type-badge: 0.65rem; --type-btn-small: 0.85rem; --type-section-heading: 1rem; --type-caption: 0.8rem; --type-preview-title: 1.1rem; --type-alert-icon: 2rem; --type-dash-greeting: 1.35rem; --type-bottom-nav-label: 0.68rem; --type-add-sheet-title: 0.9rem; --type-add-sheet-desc: 0.78rem; /* —— Palette (primitive) —— */ --color-primary: #3880ff; --color-primary-pressed: #3171e0; --color-primary-rgb: 56, 128, 255; --color-danger: #eb445a; --color-success: #2dd36f; --color-warning: #ffc409; --color-bg-page: #f5f5f7; --color-surface: #ffffff; --color-text: #1a1a1e; --color-text-muted: #666666; --color-border: #e0e0e5; --color-on-primary: #ffffff; --color-list-actions-bg: #fafafa; --color-input-readonly-bg: #f0f0f2; --color-card-danger-border: #ffcdd2; --color-card-danger-bg: #fff8f8; /* Status chips */ --color-status-paid-bg: rgba(45, 211, 111, 0.2); --color-status-paid-text: #1b5e20; --color-status-partial-bg: rgba(255, 196, 9, 0.25); --color-status-partial-text: #856404; --color-status-unpaid-bg: rgba(235, 68, 90, 0.15); --color-status-unpaid-text: #c62828; /* Banners */ --color-banner-warn-bg: #fff8e6; --color-banner-warn-border: #ffe082; --color-overlay-scrim: rgba(0, 0, 0, 0.45); /* —— Shell —— */ --shell-max-width: 430px; --shell-bg: var(--color-bg-page); --shell-shadow: 0 0 40px rgba(0, 0, 0, 0.08); /* Focus & interactive */ --focus-ring-color: rgba(var(--color-primary-rgb), 0.2); --header-btn-active-bg: rgba(var(--color-primary-rgb), 0.12); --fab-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.45); --chart-mock-gradient: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.15), transparent); /* Card elevation */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04); /* Brand (auth) */ --color-brand-heading: var(--color-text); --color-brand-tagline: var(--color-text-muted); --brand-mark-background: var(--color-primary); --brand-mark-text: var(--color-on-primary); --brand-mark-shadow: none; --size-brand-mark: 64px; --radius-brand-mark: 16px; --type-brand-mark: 1.65rem; --weight-brand-heading: var(--font-weight-bold); --weight-welcome: var(--font-weight-medium); --space-brand-block-pad: 24px 16px 8px; /* Auth card */ --login-card-border: 1px solid var(--color-border); --login-card-shadow: var(--shadow-card); --color-welcome: var(--color-text-muted); --btn-primary-shadow: none; --btn-primary-active-shadow: none; --btn-outline-border: 2px solid var(--color-primary); --btn-outline-bg: transparent; --color-legal-link: var(--color-text-muted); --color-legal-link-pressed: var(--color-legal-link); /* Sticky footers (forms) */ --app-footer-padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + var(--safe-bottom)); /* Outline button — danger variant */ --btn-danger-outline-color: var(--color-danger); --btn-danger-outline-border: var(--color-danger); /* App header (toolbar) */ --app-header-icon-touch: 40px; --app-header-gap: var(--gap-sm); --app-header-min-height: 52px; --app-header-pad-y: var(--space-xs); --app-header-pad-x: var(--space-sm); /* Bottom navigation + create sheet (dashboard) */ --bottom-nav-height: 52px; --bottom-nav-inner-pad-x: var(--space-xxs); --bottom-nav-bg: var(--color-surface); --bottom-nav-border-top: 1px solid var(--color-border); --bottom-nav-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06); --bottom-nav-icon-size: 1.28rem; --bottom-nav-item-color: var(--color-text-muted); --bottom-nav-item-active-color: var(--color-primary); --bottom-nav-item-active-bg: rgba(var(--color-primary-rgb), 0.08); --bottom-nav-fab-size: 48px; --bottom-nav-fab-icon-size: 1.65rem; --add-sheet-panel-bg: var(--color-surface); --add-sheet-panel-shadow: var(--shadow-card); --add-sheet-handle-bg: var(--color-border); --dash-content-pad-bottom: calc(var(--bottom-nav-height) + var(--space-xl) + var(--safe-bottom)); /* Dashboard donuts — size & surface */ --pie-chart-size: 108px; --pie-donut-hole: 56%; --pie-surround-pad: var(--space-xs); --pie-surround-bg: var(--color-bg-page); --pie-surround-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); --pie-ring-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.06); /* Quotation chart — single-hue progression (reads professional, works with green theme) */ --pie-quote-1: #14532d; --pie-quote-2: #166534; --pie-quote-3: #15803d; --pie-quote-4: #4ade80; /* Invoice chart — status-like but restrained */ --pie-inv-paid: #166534; --pie-inv-partial: #a16207; --pie-inv-unpaid: #9a3412; /* Legacy aliases — used across mobile.css */ --primary: var(--color-primary); --primary-shade: var(--color-primary-pressed); --danger: var(--color-danger); --success: var(--color-success); --warning: var(--color-warning); --bg: var(--color-bg-page); --card: var(--color-surface); --text: var(--color-text); --text-muted: var(--color-text-muted); --border: var(--color-border); } /* Green & white theme — every screen with data-page (login + full app; requires body data-page on each HTML page) */ body[data-page] { --color-primary: #15803d; --color-primary-pressed: #166534; --color-primary-rgb: 21, 128, 61; --color-bg-page: #f4fbf6; --shell-bg: linear-gradient(180deg, #e8f5eb 0%, #f4fbf6 28%, #ffffff 52%); --shell-shadow: 0 0 48px rgba(21, 128, 61, 0.06); --btn-primary-shadow: 0 4px 14px rgba(21, 128, 61, 0.35); --btn-primary-active-shadow: 0 2px 8px rgba(21, 128, 61, 0.28); --btn-outline-border: 2px solid rgba(21, 128, 61, 0.35); --btn-outline-bg: rgba(255, 255, 255, 0.8); --focus-ring-color: rgba(21, 128, 61, 0.18); --header-btn-active-bg: rgba(21, 128, 61, 0.12); --fab-shadow: 0 4px 14px rgba(21, 128, 61, 0.35); --chart-mock-gradient: linear-gradient(180deg, rgba(21, 128, 61, 0.12), transparent); /* Re-resolve so active tab uses green ( :root had blue baked into inherited token ) */ --bottom-nav-item-active-color: var(--color-primary); --bottom-nav-item-active-bg: rgba(var(--color-primary-rgb), 0.08); --primary: var(--color-primary); --primary-shade: var(--color-primary-pressed); --bg: var(--color-bg-page); } /* Emerald app bar — same chrome as dashboard on every screen except login (home has no toolbar) */ body[data-page]:not([data-page='home']) { --app-header-dashboard-bg: linear-gradient( 168deg, #1a9f55 0%, #15803d 38%, #166534 72%, #134e2a 100% ); --app-header-dashboard-border-bottom: 1px solid rgba(255, 255, 255, 0.14); --app-header-dashboard-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 18px rgba(15, 81, 50, 0.35); --app-header-dashboard-title-color: #f7fef9; --app-header-dashboard-btn-color: rgba(255, 255, 255, 0.95); --app-header-dashboard-btn-active-bg: rgba(255, 255, 255, 0.16); --app-header-dashboard-focus-ring: rgba(255, 255, 255, 0.4); } /* Login page — brand block & auth card */ body[data-page='home'] { --login-hero-gradient: linear-gradient(135deg, #a5d6a7 0%, #ffffff 50%, #0d3d11 100%); --shell-bg: var(--login-hero-gradient); --color-bg-page: #0d3d11; --bg: var(--login-hero-gradient); --shell-shadow: 0 0 48px rgba(13, 61, 17, 0.35); --color-brand-heading: #0d3d11; --color-brand-tagline: #2e7d32; --brand-mark-background: linear-gradient(145deg, #ffffff 0%, #e8f4e9 45%, #c8e6c9 100%); --brand-mark-text: #0d3d11; --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.4) inset; --space-brand-block-pad: 32px 16px 16px; --login-card-border: 1px solid rgba(255, 255, 255, 0.35); --login-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08); --color-welcome: #14532d; --color-legal-link: #4d7c59; --color-legal-link-pressed: var(--color-primary-pressed); } html { font-family: var(--font-family-base); font-size: var(--type-html-size); }