/* * ASENTRA SMART PARKING — mobile-browser demo * M00 PART 02 · design tokens (single source of truth). * * Rules for later parts: * - Foundation/product styles (base.css and onward) consume these variables; * do not hardcode literal colors, sizes, radii, or spacing. * - Component tokens (buttons, inputs, cards, nav) are owned by M00 PART 03+, * not this file. * - Load tokens.css BEFORE any other stylesheet. */ :root { /* ============================================================ Typography ============================================================ */ --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-size-root: 100%; /* browser/user default root size (M00 FINAL FIX: a11y) */ --font-size-100: 0.78rem; /* meta, captions */ --font-size-200: 0.89rem; /* secondary copy */ --font-size-300: 1rem; /* body */ --font-size-400: 1.0625rem; /* section titles */ --font-size-500: 1.25rem; /* page titles */ --font-size-600: 1.5rem; /* display (login/dashboard) */ --line-height-tight: 1.25; --line-height-normal: 1.5; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --letter-spacing-wide: 0.02em; /* ============================================================ Typography — semantic roles (CR-M08-UI-REFRESH-01 · PART 01A) Aliases over the primitive scale above. Consumers reference the role tokens (e.g. font-size: var(--font-size-page-title)) so a role can be retuned in one place. Values resolve to today's exact primitives, so adding them changes nothing visually by itself. Sizes are rem only — no fixed widths, no horizontal overflow risk; long numeric strings keep the existing overflow-wrap policy. ============================================================ */ --font-size-hero: var(--font-size-600); /* 1.5rem hero / display lead, numeric text */ --font-weight-hero: var(--font-weight-semibold); --line-height-hero: var(--line-height-tight); --font-size-page-title: var(--font-size-500); /* 1.25rem page title */ --font-weight-page-title: var(--font-weight-semibold); --line-height-page-title: var(--line-height-tight); --font-size-section-title: var(--font-size-400); /* 1.0625rem section title */ --font-weight-section-title: var(--font-weight-semibold); --line-height-section-title: var(--line-height-tight); --font-size-card-title: var(--font-size-300); /* 1rem card title / bold card lead */ --font-weight-card-title: var(--font-weight-semibold); --line-height-card-title: var(--line-height-tight); --font-size-body-secondary: var(--font-size-200); /* 0.89rem body secondary / page notes */ --font-weight-body-secondary: var(--font-weight-regular); --line-height-body-secondary: var(--line-height-normal); --font-size-caption: var(--font-size-100); /* 0.78rem captions, meta, micro-labels */ --font-weight-caption: var(--font-weight-regular); --line-height-caption: var(--line-height-tight); /* Numeric values: semantic family alias (today the mono face) plus a tabular-figures feature for when numerals keep the base UI face — columns of digits then align without forcing a font switch. */ --font-family-numeric: var(--font-family-mono); --font-variant-numeric-tabular: tabular-nums; /* ============================================================ Spacing scale (4px base) ============================================================ */ --space-0: 0; --space-05: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Semantic rhythm aliases (CR-M08-UI-REFRESH-01 · PART 01A). Every value stays on the 4px grid; consumers may compose with calc() but must not add off-grid literals. No fixed widths. */ --space-section: var(--space-4); /* 16px rhythm between page sections */ --space-row-compact: var(--space-2); /* 8px compact stacked rows (list/card rows) */ --space-hero: var(--space-6); /* 24px breathing room around a hero/display lead */ /* ============================================================ Radius scale ============================================================ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* ============================================================ Borders ============================================================ */ --border-width-thin: 1px; --border-width-medium: 2px; /* ============================================================ Surfaces & text (clean enterprise: light neutrals + navy/charcoal ink) ============================================================ */ --color-scheme: light; --color-surface-page: #f4f5f7; --color-surface-raised: #ffffff; --color-surface-muted: #eceef2; --color-border: #e2e4e9; --color-border-strong: #cdd2db; --color-text-primary: #16181d; --color-text-secondary: #5b6270; --color-text-faint: #7a8190; --color-text-inverse: #ffffff; /* Blue accent */ --color-accent: #2563eb; --color-accent-strong: #1d4fd0; /* pressed/hover — for later components */ --color-accent-soft: #eaf1fe; /* ============================================================ Status colors (accessible as text on raised/page surfaces; -soft variants for tinted badge/callout backgrounds) ============================================================ */ --color-success: #1f7a45; --color-success-soft: #e8f5ec; --color-warning: #946200; --color-warning-soft: #fdf3dd; --color-danger: #9c2b2b; --color-danger-soft: #fdeceb; --color-info: #1c5aa8; --color-info-soft: #e8f0fb; /* ============================================================ Touch targets (mobile-browser demo, no app shell yet) ============================================================ */ --touch-target-min: 44px; --touch-target-comfy: 48px; /* ============================================================ Mobile safe areas + gutters ============================================================ */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --gutter-safe-top: max(var(--space-4), var(--safe-area-top)); --gutter-safe-right: max(var(--space-4), var(--safe-area-right)); --gutter-safe-bottom: max(var(--space-4), var(--safe-area-bottom)); --gutter-safe-left: max(var(--space-4), var(--safe-area-left)); /* ============================================================ Basic responsive sizing ============================================================ */ --layout-viewport-min-height: 100dvh; --layout-app-max-width: 480px; /* mobile column; centers on wide screens */ --layout-content-max-width: 26rem; /* inner measure for panels/text blocks */ /* ============================================================ Component primitives (M00 PART 03) ============================================================ */ --color-overlay: rgb(18 22 33 / 55%); /* modal backdrop */ --shadow-card: 0 1px 2px rgb(22 24 29 / 6%), 0 4px 16px rgb(22 24 29 / 8%); --shadow-float: 0 8px 28px rgb(22 24 29 / 18%); --z-modal: 100; --z-toast: 110; --duration-fast: 140ms; --duration-normal: 220ms; --duration-slow: 800ms; /* ambient loops (spinner, shimmer) */ --easing-standard: cubic-bezier(0.2, 0, 0, 1); --opacity-disabled: 0.55; --color-skeleton: var(--color-surface-muted); --color-skeleton-highlight: var(--color-surface-raised); /* ============================================================ Shell (M00 PART 04) ============================================================ */ --shell-bar-height: 56px; --shell-nav-item-height: 48px; --shell-logo-height: 24px; --shell-logo-max-width: 128px; --shell-nav-glyph-size: 20px; }