/* ========================================================================== AIMatric Billing · design tokens -------------------------------------------------------------------------- The palette is AIMatric's own: deep teal for everything structural, a single orange for the one action that matters on each screen, and navy for the dark ground. Nothing else is allowed to be loud. Two rules hold the whole system together: 1. Teal is the product. Orange is the verb. If a screen has two orange things on it, one of them is wrong — the eye should land on the button that takes the money and nowhere else. 2. Money is never decorative. It is set in tabular figures, ruled into columns, and closed with a double rule. Colour on a number means something specific (credit, debit, variance) and is never styling. Two theme mechanisms, both supported: - the OS preference, via prefers-color-scheme - an explicit choice, via data-theme on (persisted to localStorage) The explicit choice always wins, in both directions. ========================================================================== */ :root { color-scheme: light dark; /* ---- the brand ramp, verbatim from aimatric.com ---- */ --teal-900: #0a4a54; --teal-800: #0c5c68; --teal-700: #0e6e7c; --teal-600: #108090; --teal-500: #1292a4; --teal-400: #20b2c8; --teal-300: #4ecee0; --teal-200: #8ce4f0; --teal-100: #d0f4fa; --teal-50: #edfbfd; --orange-700: #c2410c; --orange-600: #ea580c; --orange-500: #f97316; --orange-400: #fb923c; --navy-900: #0f172a; --navy-800: #1e293b; --navy-700: #334155; /* ---- surfaces & ink (light: a lit room, cool paper) ---- */ --surface: #f1f5f8; --surface-raised: #ffffff; --surface-raised-2: #ffffff; --surface-sunken: #e3eaf0; --ink: #0f172a; --ink-muted: #475569; --ink-faint: #7c8a9a; /* ---- brand & feedback ---- `brand` is text, borders and quiet marks. `brand-strong` is any filled surface the brand owns: the topbar mark, the scan button, a primary control. `accent` is the orange, and it is rationed. */ --brand: var(--teal-700); --brand-strong: var(--teal-700); --brand-ink: #ffffff; --brand-tint: color-mix(in oklab, var(--teal-700) 7%, var(--surface)); --accent: var(--orange-500); --accent-strong: var(--orange-600); --accent-ink: #9a3412; --success: #047857; --success-surface: #d1fae5; --warning: #b45309; --warning-surface: #fef3c7; --danger: #dc2626; --danger-strong: #b91c1c; --danger-ink: #ffffff; --danger-surface: #fee2e2; --focus: var(--teal-500); /* ---- money has its own palette, tuned for contrast on both grounds ---- Variance is green ONLY at exactly zero. Cash over is amber, not green: an unexplained surplus is as much an error as a shortfall. */ --money-ink: var(--ink); --money-credit: #047857; --money-debit: #b91c1c; --money-variance-zero: #047857; --money-variance-short: #b91c1c; --money-variance-over: #b45309; --money-pending: var(--ink-muted); /* ---- rules: still the structural device, now drawn in the brand ---- */ --line: color-mix(in oklab, var(--navy-900) 11%, transparent); --line-strong: color-mix(in oklab, var(--navy-900) 26%, transparent); --scrim: rgb(9 26 38 / 0.5); /* ---- chart series: distinguishable in both themes and for the common colour-vision deficiencies. Order is fixed; a category keeps its index everywhere it appears. Teal leads because the first series is usually the total, and the total is the product speaking. ---- */ --chart-1: #0e6e7c; --chart-2: #f97316; --chart-3: #6366f1; --chart-4: #10b981; --chart-5: #d946a6; --chart-6: #64748b; --chart-grid: var(--line); --chart-axis: var(--ink-faint); /* ---- type ---- Inter is AIMatric's typeface. The stack falls through to the system face rather than a web font that may not have loaded: a till that renders in Helvetica is fine, a till that renders in nothing is not. Noto Sans Kannada carries the bilingual labels. */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Kannada", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; --text-xs: clamp(0.75rem, 0.74rem + 0.06vw, 0.78rem); --text-sm: clamp(0.84rem, 0.82rem + 0.12vw, 0.91rem); --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.09rem); --text-lg: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem); --text-xl: clamp(1.3125rem, 1.23rem + 0.36vw, 1.5rem); --text-2xl: clamp(1.5625rem, 1.43rem + 0.6vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.66rem + 0.95vw, 2.375rem); --text-money: var(--text-lg); --text-money-total: clamp(1.75rem, 1.54rem + 0.95vw, 2.25rem); --text-money-hero: clamp(2.5rem, 1.86rem + 2.86vw, 4rem); /* ---- space & size ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --tap-min: 48px; --tap-primary: 64px; --actionbar-h: calc(76px + env(safe-area-inset-bottom)); --navbar-h: calc(72px + env(safe-area-inset-bottom)); --page-pad: clamp(16px, 4vw, 32px); --content-max: 1120px; /* ---- radii: softer than the ledger was, matching aimatric.com's 20px ---- */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ---- elevation: teal-tinted, so a raised card reads as lifted off the brand ground rather than smudged with grey ---- */ --e-1: 0 1px 2px rgb(10 74 84 / 0.07), 0 1px 1px rgb(10 74 84 / 0.04); --e-2: 0 2px 8px rgb(10 74 84 / 0.09), 0 1px 2px rgb(10 74 84 / 0.05); --e-3: 0 10px 28px rgb(10 74 84 / 0.13), 0 3px 8px rgb(10 74 84 / 0.07); --e-4: 0 20px 60px rgb(10 74 84 / 0.22), 0 6px 16px rgb(10 74 84 / 0.1); --e-brand: 0 8px 24px rgb(12 92 104 / 0.3); --e-accent: 0 8px 24px rgb(234 88 12 / 0.32); /* ---- gradients: used on brand surfaces only — the hero, the topbar mark, the payment celebration. Never behind text that has to be read fast. ---- */ --grad-brand: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%); --grad-brand-deep: linear-gradient(160deg, #0b3f48 0%, var(--teal-800) 55%, var(--teal-600) 100%); --grad-accent: linear-gradient(135deg, var(--orange-600) 0%, var(--orange-400) 100%); /* ---- motion. Spring is reserved for exactly two moments: the scan hit and the payment celebration. Money never bounces. ---- */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-grand: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- stacking ---- */ --z-nav: 100; --z-actionbar: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== Dark theme — navy, the same ground aimatric.com uses under its hero. Elevation here is a lighter surface plus a lit top edge, not a bigger shadow: shadows barely register on #0F172A. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #0f172a; --surface-raised: #1b2537; --surface-raised-2: #273348; --surface-sunken: #0a1120; --ink: #e9eff5; --ink-muted: #9fb0c2; --ink-faint: #6c7f93; --brand: var(--teal-300); --brand-strong: var(--teal-700); --brand-ink: #ffffff; --brand-tint: color-mix(in oklab, var(--teal-400) 14%, var(--surface)); --accent: var(--orange-400); --accent-strong: var(--orange-500); --accent-ink: var(--orange-400); --success: #34d399; --success-surface: #0c3b2e; --warning: #fbbf24; --warning-surface: #3b2c0c; --danger: #f87171; --danger-strong: #dc2626; --danger-ink: #ffffff; --danger-surface: #43191b; --focus: #7dd3fc; --money-credit: #34d399; --money-debit: #fca5a5; --money-variance-zero: #34d399; --money-variance-short: #fca5a5; --money-variance-over: #fbbf24; --chart-1: #4ecee0; --chart-2: #fb923c; --chart-3: #a5b4fc; --chart-4: #34d399; --chart-5: #f0abfc; --chart-6: #94a3b8; --line: color-mix(in oklab, #e9eff5 15%, transparent); --line-strong: color-mix(in oklab, #e9eff5 32%, transparent); --scrim: rgb(2 6 14 / 0.68); --e-1: inset 0 1px 0 rgb(233 239 245 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5); --e-2: inset 0 1px 0 rgb(233 239 245 / 0.06), 0 2px 8px rgb(0 0 0 / 0.55); --e-3: inset 0 1px 0 rgb(233 239 245 / 0.07), 0 10px 28px rgb(0 0 0 / 0.6); --e-4: inset 0 1px 0 rgb(233 239 245 / 0.08), 0 20px 56px rgb(0 0 0 / 0.7); --e-brand: 0 8px 24px rgb(0 0 0 / 0.5); --e-accent: 0 8px 24px rgb(234 88 12 / 0.28); --grad-brand: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%); --grad-brand-deep: linear-gradient(160deg, #08313a 0%, #0b4550 55%, var(--teal-700) 100%); } } :root[data-theme="dark"] { --surface: #0f172a; --surface-raised: #1b2537; --surface-raised-2: #273348; --surface-sunken: #0a1120; --ink: #e9eff5; --ink-muted: #9fb0c2; --ink-faint: #6c7f93; --brand: var(--teal-300); --brand-strong: var(--teal-700); --brand-ink: #ffffff; --brand-tint: color-mix(in oklab, var(--teal-400) 14%, var(--surface)); --accent: var(--orange-400); --accent-strong: var(--orange-500); --accent-ink: var(--orange-400); --success: #34d399; --success-surface: #0c3b2e; --warning: #fbbf24; --warning-surface: #3b2c0c; --danger: #f87171; --danger-strong: #dc2626; --danger-ink: #ffffff; --danger-surface: #43191b; --focus: #7dd3fc; --money-credit: #34d399; --money-debit: #fca5a5; --money-variance-zero: #34d399; --money-variance-short: #fca5a5; --money-variance-over: #fbbf24; --chart-1: #4ecee0; --chart-2: #fb923c; --chart-3: #a5b4fc; --chart-4: #34d399; --chart-5: #f0abfc; --chart-6: #94a3b8; --line: color-mix(in oklab, #e9eff5 15%, transparent); --line-strong: color-mix(in oklab, #e9eff5 32%, transparent); --scrim: rgb(2 6 14 / 0.68); --e-1: inset 0 1px 0 rgb(233 239 245 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5); --e-2: inset 0 1px 0 rgb(233 239 245 / 0.06), 0 2px 8px rgb(0 0 0 / 0.55); --e-3: inset 0 1px 0 rgb(233 239 245 / 0.07), 0 10px 28px rgb(0 0 0 / 0.6); --e-4: inset 0 1px 0 rgb(233 239 245 / 0.08), 0 20px 56px rgb(0 0 0 / 0.7); --e-brand: 0 8px 24px rgb(0 0 0 / 0.5); --e-accent: 0 8px 24px rgb(234 88 12 / 0.28); --grad-brand: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%); --grad-brand-deep: linear-gradient(160deg, #08313a 0%, #0b4550 55%, var(--teal-700) 100%); } /* ========================================================================== Reset — small, and only what this product needs. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100dvh; /* Kannada glyphs need headroom; never let a line box clip them. */ text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.011em; /* Hierarchy is size, weight and colour. Never case: Kannada has none. */ text-transform: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: inherit; } ::selection { background: var(--brand-tint); } /* ========================================================================== Money typography — the product's signature. Tabular figures so columns rule up like a hand-kept ledger. ========================================================================== */ .money { font-variant-numeric: tabular-nums lining-nums; /* Belt-and-braces for older Android WebViews that ignore the shorthand. */ font-feature-settings: "tnum" 1, "lnum" 1; font-weight: 650; letter-spacing: 0.01em; color: var(--money-ink); font-size: var(--text-money); white-space: nowrap; } .money--total { font-size: var(--text-money-total); font-weight: 700; letter-spacing: 0; } .money--hero { font-size: var(--text-money-hero); font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; } .money--sm { font-size: var(--text-sm); font-weight: 600; } /* The ₹ is muted and reduced so the numerals carry the size: at arm's length the amount reads first and the currency second. */ .money .rupee { font-size: 0.78em; font-weight: 500; color: var(--ink-muted); margin-inline-end: 0.06em; } .money--hero .paise { font-size: 0.52em; vertical-align: 0.55em; letter-spacing: 0; } .money--credit { color: var(--money-credit); } .money--debit { color: var(--money-debit); } .money--pending { color: var(--money-pending); } /* The double rule is the ledger's full stop: it appears under the invoice grand total, the totals-panel payable, and the shift-close variance. Nowhere else. */ .rule-grand { border-bottom: 3px double var(--ink); padding-bottom: 2px; } .rule-sub { border-top: 1px solid var(--ink); } /* ========================================================================== Reduced motion — the fallbacks are designed, not merely "off". Component stylesheets add their own specific alternatives; this is the global floor. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-grand: 1ms; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }