/* ================================================================ COMANDAS GLOBAL TYPOGRAPHY SYSTEM Shared typography for: - Admin - Camarero - Barra - Cocina - Public interfaces ================================================================ */ /* ================================================================ TYPOGRAPHY VARIABLES ================================================================ */ :root { /* |-------------------------------------------------------------------------- | Font family |-------------------------------------------------------------------------- */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* |-------------------------------------------------------------------------- | Font sizes |-------------------------------------------------------------------------- */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 26px; --font-size-3xl: 32px; /* |-------------------------------------------------------------------------- | Font weights |-------------------------------------------------------------------------- */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; } /* ================================================================ DOCUMENT ================================================================ */ html { font-family: var(--font-ui); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-ui) !important; font-weight: var(--font-weight-normal); line-height: 1.5; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ================================================================ FORM ELEMENTS ================================================================ */ button, input, textarea, select, option { font-family: var(--font-ui) !important; } button, input, textarea, select { font-size: inherit; } /* ================================================================ COMMON ELEMENTS ================================================================ */ a, label, small, strong, span, p, div, table, thead, tbody, tfoot, tr, th, td { font-family: inherit; } /* ================================================================ HEADINGS ================================================================ */ h1, h2, h3, h4, h5, h6 { margin-top: 0; font-family: var(--font-ui) !important; color: inherit; line-height: 1.15; letter-spacing: -0.025em; } h1 { font-weight: var(--font-weight-extrabold); } h2 { font-weight: var(--font-weight-bold); } h3 { font-weight: var(--font-weight-bold); } h4, h5, h6 { font-weight: var(--font-weight-semibold); } /* ================================================================ PARAGRAPHS ================================================================ */ p { line-height: 1.55; } /* ================================================================ BUTTONS / ACTIONS ================================================================ */ button, a[class*="button"], a[class*="action"], button[class*="button"], button[class*="action"] { letter-spacing: -0.01em; } /* ================================================================ NUMERIC DATA ================================================================ */ /* |-------------------------------------------------------------------------- | Prices, totals and counters |-------------------------------------------------------------------------- | | Tabular numbers prevent the interface from visually jumping when | operational values change. | */ [class*="price"], [class*="total"], [class*="amount"], [class*="count"], [class*="stat-value"] { font-variant-numeric: tabular-nums; } /* ================================================================ ADMIN ================================================================ */ body.admin-ui { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Admin headings |-------------------------------------------------------------------------- */ body.admin-ui h1 { font-family: var(--font-ui) !important; font-weight: var(--font-weight-extrabold); letter-spacing: -0.035em; } body.admin-ui h2 { font-family: var(--font-ui) !important; font-weight: var(--font-weight-bold); letter-spacing: -0.025em; } body.admin-ui h3 { font-family: var(--font-ui) !important; font-weight: var(--font-weight-bold); } /* |-------------------------------------------------------------------------- | Admin header / navigation |-------------------------------------------------------------------------- */ .admin-header, .admin-header *, .admin-global-nav, .admin-global-nav *, .admin-global-nav-menu, .admin-global-nav-menu *, .admin-operational-shortcuts, .admin-operational-shortcuts *, .admin-account-panel-link { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Admin account menu |-------------------------------------------------------------------------- */ body.admin-ui .app-user, body.admin-ui .app-user *, body.admin-ui .app-user-menu, body.admin-ui .app-user-menu * { font-family: var(--font-ui) !important; } /* ================================================================ CAMARERO ================================================================ */ body.waiter-ui { font-family: var(--font-ui) !important; } .waiter-shell, .waiter-shell * { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Camarero headings |-------------------------------------------------------------------------- */ .waiter-intro h1, .waiter-order-hero h1 { font-weight: var(--font-weight-extrabold); letter-spacing: -0.035em; } .waiter-area h2, .waiter-active-section h2, .waiter-product-category h2, .waiter-cart h2 { font-weight: var(--font-weight-bold); letter-spacing: -0.025em; } /* |-------------------------------------------------------------------------- | Camarero header / account |-------------------------------------------------------------------------- */ .waiter-header, .waiter-header *, .waiter-user, .waiter-user *, .waiter-user-menu, .waiter-user-menu * { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Camarero modals |-------------------------------------------------------------------------- */ .waiter-management-modal, .waiter-management-modal * { font-family: var(--font-ui) !important; } /* ================================================================ BARRA ================================================================ */ body.bar-ui { font-family: var(--font-ui) !important; } .bar-shell, .bar-shell * { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Barra headings |-------------------------------------------------------------------------- */ .bar-hero h1 { font-weight: var(--font-weight-extrabold); letter-spacing: -0.035em; } .bar-main h2, .bar-main h3 { font-weight: var(--font-weight-bold); } /* |-------------------------------------------------------------------------- | Barra header |-------------------------------------------------------------------------- */ .bar-header, .bar-header * { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Barra notifications |-------------------------------------------------------------------------- */ .bar-new-order-toast, .bar-new-order-toast * { font-family: var(--font-ui) !important; } /* ================================================================ COCINA ================================================================ */ body.kitchen-ui { font-family: var(--font-ui) !important; } .kitchen-shell, .kitchen-shell * { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Cocina headings |-------------------------------------------------------------------------- */ .kitchen-hero h1 { font-weight: var(--font-weight-extrabold); letter-spacing: -0.035em; } .kitchen-main h2, .kitchen-main h3 { font-weight: var(--font-weight-bold); } /* |-------------------------------------------------------------------------- | Cocina header |-------------------------------------------------------------------------- */ .kitchen-header, .kitchen-header * { font-family: var(--font-ui) !important; } /* |-------------------------------------------------------------------------- | Cocina notifications |-------------------------------------------------------------------------- */ .kitchen-toast, .kitchen-toast * { font-family: var(--font-ui) !important; } /* ================================================================ SHARED ACCOUNT MENU ================================================================ */ .app-user, .app-user *, .app-user-menu, .app-user-menu * { font-family: var(--font-ui) !important; } /* ================================================================ OPERATIONAL ADMIN NAVIGATION ================================================================ */ .operational-admin-link, .operational-admin-link *, .operational-admin-menu-link, .operational-admin-menu-link * { font-family: var(--font-ui) !important; } /* ================================================================ TABLES ================================================================ */ table, thead, tbody, tfoot, tr, th, td { font-family: var(--font-ui) !important; } th { font-weight: var(--font-weight-bold); } /* ================================================================ INPUTS ================================================================ */ input::placeholder, textarea::placeholder { font-family: var(--font-ui); opacity: .7; } /* ================================================================ SELECTS ================================================================ */ select, select option { font-family: var(--font-ui) !important; } /* ================================================================ BADGES / LABELS / STATUS ================================================================ */ [class*="badge"], [class*="status"], [class*="eyebrow"], [class*="kicker"] { font-family: var(--font-ui) !important; } /* ================================================================ PRICES / TOTALS ================================================================ */ [class*="price"], [class*="total"], [class*="amount"] { font-family: var(--font-ui) !important; font-variant-numeric: tabular-nums; } /* ================================================================ COUNTERS / STATISTICS ================================================================ */ [class*="count"], [class*="stat"] strong { font-variant-numeric: tabular-nums; } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 700px) { body { } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 420px) { body { } }