/* ========================================================================== TSS Billing · KHATA (ಖಾತಾ) design tokens -------------------------------------------------------------------------- The visual language is the cooperative's own ledger book: cream paper, carbon ink, lacquer-red binding, turmeric as the single celebratory accent, and money always set in ruled tabular columns closed with a double rule. 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; /* ---- surfaces & ink (light: sunlight on paper) ---- */ --surface: #f6f1e5; --surface-raised: #fdfbf4; --surface-raised-2: #ffffff; --surface-sunken: #ede5d4; --ink: #201d17; --ink-muted: #5c5546; --ink-faint: #8a8171; /* ---- brand & feedback ---- */ --brand: #7a2e1c; --brand-strong: #7a2e1c; --brand-ink: #fff6ea; --brand-tint: color-mix(in oklab, #7a2e1c 8%, var(--surface)); --accent: #f2c94c; --accent-ink: #775800; --success: #1e6b38; --success-surface: #d7e8cf; --warning: #77510a; --warning-surface: #f5e3b3; --danger: #be3018; --danger-strong: #9c2410; --danger-ink: #fff6ea; --danger-surface: #f6d9ce; --focus: #2050c8; /* ---- money has its own palette, tuned to AAA ---- 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: #14522a; --money-debit: #8c1f0e; --money-variance-zero: #14522a; --money-variance-short: #8c1f0e; --money-variance-over: #77510a; --money-pending: var(--ink-muted); /* ---- rules: the ledger's structural device ---- */ --line: color-mix(in oklab, var(--ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--ink) 32%, transparent); --scrim: rgb(32 29 23 / 0.44); /* ---- chart series: distinguishable in both themes and for the common colour-vision deficiencies. Order is fixed; a category keeps its index everywhere it appears. ---- */ --chart-1: #7a2e1c; --chart-2: #1e6b38; --chart-3: #b5851a; --chart-4: #2f6f8f; --chart-5: #8c4a75; --chart-6: #5c5546; --chart-grid: var(--line); --chart-axis: var(--ink-faint); /* ---- type ---- */ --font-sans: 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(64px + env(safe-area-inset-bottom)); --page-pad: clamp(16px, 4vw, 32px); --content-max: 1120px; /* ---- radii: composed, not blobby ---- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---- elevation: warm ink-tinted layered shadows ---- */ --e-1: 0 1px 2px rgb(32 29 23 / 0.06), 0 1px 1px rgb(32 29 23 / 0.04); --e-2: 0 2px 6px rgb(32 29 23 / 0.08), 0 1px 2px rgb(32 29 23 / 0.05); --e-3: 0 8px 24px rgb(32 29 23 / 0.12), 0 2px 6px rgb(32 29 23 / 0.06); --e-4: 0 16px 48px rgb(32 29 23 / 0.18), 0 4px 12px rgb(32 29 23 / 0.08); /* ---- 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 — the shop after the shutter drops. Warm charcoal like oiled wood and iron. Never blue-black, never pure #000. Elevation here is a lighter surface plus a lit top edge, not a bigger shadow: shadows barely register on #14120E. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #14120e; --surface-raised: #1d1a15; --surface-raised-2: #2a251e; --surface-sunken: #0e0c09; --ink: #f0eadc; --ink-muted: #ada593; --ink-faint: #7e776a; --brand: #e8825d; --brand-strong: #8a3620; --brand-ink: #ffede4; --brand-tint: color-mix(in oklab, #e8825d 12%, var(--surface)); --accent: #e2b45b; --accent-ink: #e2b45b; --success: #6fc98b; --success-surface: #1a2b1f; --warning: #e2b45b; --warning-surface: #2e2413; --danger: #f08060; --danger-strong: #f08060; --danger-ink: #14120e; --danger-surface: #33170f; --focus: #8fb0ff; --money-credit: #84d89e; --money-debit: #f5a08a; --money-variance-zero: #84d89e; --money-variance-short: #f5a08a; --money-variance-over: #e2b45b; --chart-1: #e8825d; --chart-2: #6fc98b; --chart-3: #e2b45b; --chart-4: #7fb6d4; --chart-5: #d097bb; --chart-6: #ada593; --line: color-mix(in oklab, var(--ink) 16%, transparent); --line-strong: color-mix(in oklab, var(--ink) 34%, transparent); --scrim: rgb(0 0 0 / 0.62); --e-1: inset 0 1px 0 rgb(240 234 220 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5); --e-2: inset 0 1px 0 rgb(240 234 220 / 0.06), 0 2px 8px rgb(0 0 0 / 0.55); --e-3: inset 0 1px 0 rgb(240 234 220 / 0.07), 0 10px 28px rgb(0 0 0 / 0.6); --e-4: inset 0 1px 0 rgb(240 234 220 / 0.08), 0 20px 56px rgb(0 0 0 / 0.7); } } :root[data-theme="dark"] { --surface: #14120e; --surface-raised: #1d1a15; --surface-raised-2: #2a251e; --surface-sunken: #0e0c09; --ink: #f0eadc; --ink-muted: #ada593; --ink-faint: #7e776a; --brand: #e8825d; --brand-strong: #8a3620; --brand-ink: #ffede4; --brand-tint: color-mix(in oklab, #e8825d 12%, var(--surface)); --accent: #e2b45b; --accent-ink: #e2b45b; --success: #6fc98b; --success-surface: #1a2b1f; --warning: #e2b45b; --warning-surface: #2e2413; --danger: #f08060; --danger-strong: #f08060; --danger-ink: #14120e; --danger-surface: #33170f; --focus: #8fb0ff; --money-credit: #84d89e; --money-debit: #f5a08a; --money-variance-zero: #84d89e; --money-variance-short: #f5a08a; --money-variance-over: #e2b45b; --chart-1: #e8825d; --chart-2: #6fc98b; --chart-3: #e2b45b; --chart-4: #7fb6d4; --chart-5: #d097bb; --chart-6: #ada593; --line: color-mix(in oklab, var(--ink) 16%, transparent); --line-strong: color-mix(in oklab, var(--ink) 34%, transparent); --scrim: rgb(0 0 0 / 0.62); --e-1: inset 0 1px 0 rgb(240 234 220 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5); --e-2: inset 0 1px 0 rgb(240 234 220 / 0.06), 0 2px 8px rgb(0 0 0 / 0.55); --e-3: inset 0 1px 0 rgb(240 234 220 / 0.07), 0 10px 28px rgb(0 0 0 / 0.6); --e-4: inset 0 1px 0 rgb(240 234 220 / 0.08), 0 20px 56px rgb(0 0 0 / 0.7); } /* ========================================================================== 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.3; font-weight: 600; /* 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 khata. ========================================================================== */ .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: 700; letter-spacing: -0.01em; 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 khata'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; } }