/* ========================================================================== Paya Design System — foundations -------------------------------------------------------------------------- Typography, colour and rhythm. No component styling lives here. Every declaration references a --paya-* custom property and nothing else. That is the whole reason the customizer works: a settings change rewrites one small generated file, and these rules pick it up without being touched. Loaded from app_admin_head / app_customers_head, which fire last in , so these win ties against Perfex's own stylesheets by source order. That makes it important NOT to write bare element selectors — a rule on `div` or `a` here would silently out-order intentional Tailwind utility styling in newer Perfex views. Everything is anchored to a class Perfex actually uses. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Page canvas -------------------------------------------------------------------------- */ body.app.admin, body.customers { background-color: var(--paya-surface-page); color: var(--paya-text-primary); font-family: var(--paya-font-body); font-size: var(--paya-text-base); line-height: var(--paya-leading-normal); font-weight: var(--paya-weight-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Perfex sets the face on a long list of element selectors; inherit broadly and let the few opt-outs below take it back, rather than chasing each one. */ body.app.admin input, body.app.admin button, body.app.admin select, body.app.admin textarea, body.customers input, body.customers button, body.customers select, body.customers textarea { font-family: inherit; } /* -------------------------------------------------------------------------- 2. Headings -------------------------------------------------------------------------- Brand book: Peyda for headings, at the sizes and weights below. H1 uses the 'strong' weight, everything under it the regular heading weight. -------------------------------------------------------------------------- */ body.app.admin h1, body.app.admin h2, body.app.admin h3, body.app.admin h4, body.app.admin h5, body.app.admin h6, body.customers h1, body.customers h2, body.customers h3, body.customers h4, body.customers h5, body.customers h6 { font-family: var(--paya-font-heading); color: var(--paya-text-primary); line-height: var(--paya-leading-snug); letter-spacing: var(--paya-tracking-tight); font-weight: var(--paya-weight-heading); margin-top: 0; } body.app.admin h1, body.customers h1 { font-size: var(--paya-text-h1); font-weight: var(--paya-weight-heading-strong); } body.app.admin h2, body.customers h2 { font-size: var(--paya-text-h2); } body.app.admin h3, body.customers h3 { font-size: var(--paya-text-h3); } body.app.admin h4, body.customers h4 { font-size: var(--paya-text-h4); } body.app.admin h5, body.customers h5, body.app.admin h6, body.customers h6 { font-size: var(--paya-text-body); letter-spacing: var(--paya-tracking-normal); } /* -------------------------------------------------------------------------- 3. Text roles -------------------------------------------------------------------------- */ body.app.admin a, body.customers a { color: var(--paya-accent-primary-text); transition: color var(--paya-duration-fast) var(--paya-ease-standard); } body.app.admin a:hover, body.app.admin a:focus, body.customers a:hover, body.customers a:focus { color: var(--paya-accent-primary-hover); } body.app.admin .text-muted, body.customers .text-muted, body.app.admin .help-block, body.customers .help-block { color: var(--paya-text-secondary); } body.app.admin small, body.customers small { font-size: var(--paya-text-caption); } body.app.admin hr, body.customers hr { border-top-color: var(--paya-border-default); } body.app.admin code, body.app.admin pre, body.app.admin kbd, body.customers code, body.customers pre, body.customers kbd { font-family: var(--paya-font-mono); font-size: var(--paya-text-body-sm); } /* Latin runs inside Persian text keep their own direction, so trailing punctuation does not jump to the wrong end of the string. */ body.app.admin .ltr, body.customers .ltr, body.app.admin code, body.customers code { direction: ltr; unicode-bidi: isolate; } /* Numeric columns line up regardless of which digit set is rendered. */ body.app.admin .table td, body.app.admin .table th, body.customers .table td, body.customers .table th { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* -------------------------------------------------------------------------- 4. Selection and focus -------------------------------------------------------------------------- A visible focus ring is the one accessibility affordance the brand book does specify (4px, brand purple at 35%). -------------------------------------------------------------------------- */ body.app.admin ::selection, body.customers ::selection { background: var(--paya-purple-200); color: var(--paya-purple-900); } body.app.admin :focus-visible, body.customers :focus-visible { outline: none; box-shadow: var(--paya-shadow-focus); } /* -------------------------------------------------------------------------- 5. Motion -------------------------------------------------------------------------- The brand book ships a prefers-reduced-motion block; honour it globally rather than per component. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.app.admin *, body.customers * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 6. Print -------------------------------------------------------------------------- Dark tokens must never reach paper. Without this, a dark-mode user printing an invoice gets black ink across the whole page. -------------------------------------------------------------------------- */ @media print { [data-paya-theme], [data-paya-theme='dark'] { --paya-surface-page: #FFFFFF; --paya-surface-raised: #FFFFFF; --paya-surface-sunken: #F1F3F4; --paya-text-primary: #1E293B; --paya-text-secondary: #64748B; --paya-border-default: #E2E8F0; --paya-accent-primary-text: #5C3890; } }