/* ============================================================ URBINO DESIGN TOKENS · LAYER 3 — WORLD (CITIZEN) Citizen-world overrides for semantic tokens. Only the values that differ from the default (manager) world. Anything not redeclared here inherits the manager default. See tokens/README.md for the full architecture. ============================================================ */ .urbino-cit { /* ============================================================ FOCUS — slightly larger ring on touch surfaces ============================================================ */ --u-focus-ring: 0 0 0 4px rgba(46, 99, 235, 0.22); --u-focus-ring-danger: 0 0 0 4px rgba(220, 38, 38, 0.22); /* ============================================================ CARD — borderless, larger radius, more padding ============================================================ */ --u-card-radius: var(--u-radius-2xl); /* 22 */ --u-card-border: 0; --u-card-shadow: var(--u-shadow-sm); --u-card-padding: var(--u-space-5); /* 20 */ --u-card-padding-sm: var(--u-space-4); /* 16 */ --u-card-padding-lg: var(--u-space-6); /* 24 */ --u-card-padding-xl: var(--u-space-7); /* 28 */ --u-card-header-px: var(--u-space-5); /* 20 */ --u-card-footer-px: var(--u-space-5); /* 20 */ --u-card-header-title-size: 18px; --u-card-press-transform: scale(0.99); /* ============================================================ BUTTON — pill, generous tap target ============================================================ */ --u-btn-h-md: 48px; --u-btn-h-lg: 56px; --u-btn-h-xl: 64px; --u-btn-radius-md: var(--u-radius-pill); --u-btn-radius-lg: var(--u-radius-pill); --u-btn-radius-xl: var(--u-radius-pill); --u-btn-px-md: var(--u-space-6); /* 24 */ --u-btn-px-lg: var(--u-space-7); /* 28 */ --u-btn-px-xl: var(--u-space-7); /* 28 */ --u-btn-font-size-md: 16px; --u-btn-font-size-lg: 17px; --u-btn-font-size-xl: 18px; --u-btn-font-weight: 700; --u-btn-icon-size-md: 20px; --u-btn-icon-size-lg: 22px; --u-btn-icon-size-xl: 24px; --u-btn-press-transform: scale(0.98); /* ============================================================ INPUT — taller, larger radius ============================================================ */ --u-input-h-sm: 48px; --u-input-h-md: 56px; --u-input-h-lg: 56px; /* citizen has no separate lg — same as md */ --u-input-radius-sm: var(--u-radius-md); /* 10 */ --u-input-radius-md: var(--u-radius-lg); /* 14 */ --u-input-radius-lg: var(--u-radius-lg); /* 14 */ --u-input-px-md: var(--u-space-4); /* 16 */ --u-input-font-size-md: 16px; --u-input-textarea-min-h: 120px; --u-input-textarea-py: 14px; --u-input-leading-offset: var(--u-space-4); /* 16 */ --u-input-icon-size: 20px; --u-input-padding-leading: 44px; /* ============================================================ FIELD WRAPPER — bolder label ============================================================ */ --u-field-label-font-size: 14px; --u-field-label-font-weight: 600; --u-field-label-color: var(--u-slate-900); /* ============================================================ TOAST — top banner, larger, pill-rounded ============================================================ */ --u-toast-radius: var(--u-radius-xl); /* 18 */ --u-toast-py: var(--u-space-4); /* 16 */ --u-toast-px: var(--u-space-5); /* 20 */ --u-toast-width: 100%; /* full-width on mobile */ --u-toast-max-width: calc(100vw - var(--u-space-4) * 2); --u-toast-icon-size: 24px; --u-toast-title-font-size: 16px; --u-toast-body-font-size: 15px; --u-toast-container-py: var(--u-space-4); --u-toast-container-px: var(--u-space-4); /* ============================================================ DIALOG — larger radius, more generous padding ============================================================ */ --u-dialog-radius: var(--u-radius-2xl); /* 22 */ --u-dialog-header-py: var(--u-space-5); /* 20 */ --u-dialog-header-px: var(--u-space-6); /* 24 */ --u-dialog-body-py: var(--u-space-5); /* 20 */ --u-dialog-body-px: var(--u-space-6); /* 24 */ --u-dialog-footer-py: var(--u-space-4); /* 16 */ --u-dialog-footer-px: var(--u-space-6); /* 24 */ --u-dialog-footer-gap: var(--u-space-3); /* 12 */ --u-dialog-title-font-size: 20px; --u-dialog-close-size: 40px; --u-overlay-py: var(--u-space-4); --u-overlay-px: var(--u-space-4); /* ============================================================ TABS — larger tap targets, generous padding ============================================================ */ --u-tab-h-sm: 40px; --u-tab-h-md: 48px; --u-tab-h-lg: 56px; --u-tab-px-sm: var(--u-space-3); /* 12 */ --u-tab-px-md: var(--u-space-4); /* 16 */ --u-tab-px-lg: var(--u-space-5); /* 20 */ --u-tab-font-size-sm: 14px; --u-tab-font-size-md: 16px; --u-tab-font-size-lg: 17px; --u-tab-font-weight-active: 700; --u-tab-icon-size-md: 20px; --u-tab-icon-size-lg: 22px; /* ============================================================ CHIP — slightly larger ============================================================ */ --u-chip-px-md: var(--u-space-3); /* 12 — same number, kept explicit */ --u-chip-py-md: 4px; /* ============================================================ TAP TARGET FLOOR — 44px for thumbs ============================================================ */ --u-tap-min: 44px; /* ============================================================ TYPE SCALE — bigger floor, mobile-first ============================================================ */ --u-text-sm: 13px; --u-text-base: 16px; --u-text-md: 18px; --u-text-lg: 20px; --u-text-xl: 24px; --u-text-2xl: 30px; --u-text-3xl: 38px; --u-text-4xl: 48px; --u-h1-size: var(--u-text-3xl); --u-h2-size: var(--u-text-2xl); --u-h3-size: var(--u-text-xl); --u-h4-size: var(--u-text-lg); /* ============================================================ LAYOUT ============================================================ */ --u-page-px: var(--u-space-4); /* 16 — mobile default */ --u-page-py: var(--u-space-4); /* 16 */ --u-page-max-w: 100%; /* no max on mobile */ /* ============================================================ COMPOSITION RHYTHM — citizen defaults (more breathing room) ============================================================ */ --u-block-gap: var(--u-space-4); /* 16 */ --u-section-gap: var(--u-space-8); /* 32 */ --u-list-tile-py: var(--u-space-4); /* 16 */ --u-list-tile-px: var(--u-space-5); /* 20 */ } /* Citizen-WEB context (desktop variant of the citizen surface) — public-spa pages. Add .urbino-cit-web alongside .urbino-cit. */ .urbino-cit.urbino-cit-web { --u-page-px: var(--u-space-8); /* 32 */ --u-page-py: var(--u-space-10); /* 40 */ --u-page-max-w: 1120px; }