/* ========================================================================== Jayalakshmi Jewellery ERP - design tokens (spec section 3.1) ========================================================================== */ /* -------------------------------------------------------------------------- Theming -------------------------------------------------------------------------- Two palettes share one set of token names, so every component is written once. `data-theme` on wins in both directions; when it is absent the OS preference decides. A blocking inline script in stamps the attribute before first paint, so there is no flash of the wrong theme. -------------------------------------------------------------------------- */ :root { /* ---- Layout (theme independent) ---- */ --sidebar-w: 232px; --radius: 10px; --radius-lg: 14px; /* ---- Type (theme independent) ---- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace; } /* ============================ DARK (default) ============================= */ :root, :root[data-theme="dark"] { color-scheme: dark; /* ---- Backgrounds ---- */ --bg-body: #0A0A0A; --bg-sidebar: #0D0B06; --bg-card: #141210; --bg-card-2: #1A1712; --bg-input: #1E1A14; --bg-hover: #241F16; /* Translucent chrome - separate tokens so light mode can invert them. */ --bg-header: rgba(10,10,10,.92); --bg-overlay: rgba(0,0,0,.72); --bg-scrim: rgba(10,10,10,.6); /* ---- Gold palette ---- */ --gold: #D4AF37; --gold-bright: #F0C75E; --gold-deep: #A8842C; --gold-dim: #8A6E2F; --gold-border: rgba(212, 175, 55, 0.25); --gold-border-hi: rgba(212, 175, 55, 0.55); --gold-faint: rgba(212, 175, 55, 0.08); --gold-wash: rgba(212, 175, 55, 0.10); --gold-glow: 0 0 24px rgba(212, 175, 55, 0.12); --gold-grad: linear-gradient(135deg, #F0C75E 0%, #D4AF37 45%, #A8842C 100%); --on-gold: #171205; /* text on a gold fill */ /* ---- Text ---- */ --text-hi: #F5EFE2; --text-body: #CFC6B4; --text-mut: #8B8271; /* ---- Status ---- */ --green: #34C77B; --green-bg: rgba(52,199,123,.12); --red: #E5484D; --red-bg: rgba(229,72,77,.12); --amber: #F5A623; --amber-bg: rgba(245,166,35,.12); --blue: #4A7DFF; --blue-bg: rgba(74,125,255,.12); --purple: #9B6DFF; --purple-bg: rgba(155,109,255,.12); --teal: #2BB8A3; --teal-bg: rgba(43,184,163,.12); /* Alert text needs lifting on dark, dimming on light. */ --green-fg: #86e3b4; --red-fg: #f39a9d; --amber-fg: #f7c877; /* ---- Payment buttons ---- */ --pay-cash: #2E7D46; --pay-upi: #6A3FB5; --pay-card: #2456A6; --pay-bank: #8A6420; --pay-split: #1F7A6D; --on-pay: #ffffff; /* ---- Chart series (read by JS) ---- */ --chart-grid: rgba(212,175,55,.08); --chart-tick: #8B8271; --chart-line: #D4AF37; --chart-fill-from: rgba(212,175,55,.28); --chart-fill-to: rgba(212,175,55,.02); --chart-tip-bg: #141210; --chart-c1: #4A7DFF; --chart-c2: #F5A623; --chart-c3: #34C77B; --chart-c4: #E5484D; --chart-c5: #9B6DFF; --chart-c6: #2BB8A3; --mut-bg: rgba(139,130,113,.14); --shadow: 0 8px 28px rgba(0,0,0,.45); --row-line: rgba(212,175,55,.08); } /* ================================ LIGHT ================================== */ :root[data-theme="light"] { color-scheme: light; /* Warm ivory rather than plain white - keeps the jewellery feel. */ --bg-body: #F7F4ED; --bg-sidebar: #FFFFFF; --bg-card: #FFFFFF; --bg-card-2: #F4EFE3; --bg-input: #FFFFFF; --bg-hover: #F1EADA; --bg-header: rgba(247,244,237,.92); --bg-overlay: rgba(40,33,18,.45); --bg-scrim: rgba(247,244,237,.65); /* Gold must darken substantially to stay legible on a light surface. #D4AF37 on white is ~1.9:1 and fails WCAG; these clear AA for text. */ --gold: #7A5E1E; --gold-bright: #6B5218; --gold-deep: #5A4413; --gold-dim: #B3A279; --gold-border: rgba(122, 94, 30, 0.22); --gold-border-hi: rgba(122, 94, 30, 0.48); --gold-faint: rgba(122, 94, 30, 0.07); --gold-wash: rgba(212, 175, 55, 0.14); --gold-glow: 0 4px 18px rgba(122, 94, 30, 0.10); /* The gradient fill stays rich gold; text on it is dark either way. */ --gold-grad: linear-gradient(135deg, #E8BE52 0%, #C9A431 45%, #9B7A26 100%); --on-gold: #1A1204; --text-hi: #1C1710; --text-body: #46402F; --text-mut: #7C7360; /* Darker foregrounds, slightly stronger tints for contrast on white. */ --green: #1E8E52; --green-bg: rgba(30,142,82,.11); --red: #C3262B; --red-bg: rgba(195,38,43,.10); --amber: #9A6206; --amber-bg: rgba(154,98,6,.12); --blue: #2456C4; --blue-bg: rgba(36,86,196,.10); --purple: #6B3FC4; --purple-bg: rgba(107,63,196,.10); --teal: #14806F; --teal-bg: rgba(20,128,111,.10); --green-fg: #14663a; --red-fg: #96191d; --amber-fg: #7a4d04; --pay-cash: #23663A; --pay-upi: #57339A; --pay-card: #1E478A; --pay-bank: #7A5719; --pay-split: #17655A; --on-pay: #ffffff; --chart-grid: rgba(122,94,30,.12); --chart-tick: #7C7360; --chart-line: #A8842C; --chart-fill-from: rgba(200,164,49,.32); --chart-fill-to: rgba(200,164,49,.03); --chart-tip-bg: #FFFFFF; --chart-c1: #2456C4; --chart-c2: #C97A0A; --chart-c3: #1E8E52; --chart-c4: #C3262B; --chart-c5: #6B3FC4; --chart-c6: #14806F; --mut-bg: rgba(124,115,96,.13); --shadow: 0 6px 24px rgba(60,48,20,.13); --row-line: rgba(122,94,30,.11); } /* Follow the OS when the user has not chosen explicitly. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { color-scheme: light; --bg-body: #F7F4ED; --bg-sidebar: #FFFFFF; --bg-card: #FFFFFF; --bg-card-2: #F4EFE3; --bg-input: #FFFFFF; --bg-hover: #F1EADA; --bg-header: rgba(247,244,237,.92); --bg-overlay: rgba(40,33,18,.45); --bg-scrim: rgba(247,244,237,.65); --gold: #7A5E1E; --gold-bright: #6B5218; --gold-deep: #5A4413; --gold-dim: #B3A279; --gold-border: rgba(122,94,30,.22); --gold-border-hi: rgba(122,94,30,.48); --gold-faint: rgba(122,94,30,.07); --gold-wash: rgba(212,175,55,.14); --gold-glow: 0 4px 18px rgba(122,94,30,.10); --gold-grad: linear-gradient(135deg, #E8BE52 0%, #C9A431 45%, #9B7A26 100%); --on-gold: #1A1204; --text-hi: #1C1710; --text-body: #46402F; --text-mut: #7C7360; --green: #1E8E52; --green-bg: rgba(30,142,82,.11); --red: #C3262B; --red-bg: rgba(195,38,43,.10); --amber: #9A6206; --amber-bg: rgba(154,98,6,.12); --blue: #2456C4; --blue-bg: rgba(36,86,196,.10); --purple:#6B3FC4; --purple-bg:rgba(107,63,196,.10); --teal: #14806F; --teal-bg: rgba(20,128,111,.10); --green-fg: #14663a; --red-fg: #96191d; --amber-fg: #7a4d04; --pay-cash: #23663A; --pay-upi: #57339A; --pay-card: #1E478A; --pay-bank: #7A5719; --pay-split: #17655A; --chart-grid: rgba(122,94,30,.12); --chart-tick: #7C7360; --chart-line: #A8842C; --chart-fill-from: rgba(200,164,49,.32); --chart-fill-to: rgba(200,164,49,.03); --chart-tip-bg: #FFFFFF; --chart-c1: #2456C4; --chart-c2: #C97A0A; --chart-c3: #1E8E52; --chart-c4: #C3262B; --chart-c5: #6B3FC4; --chart-c6: #14806F; --mut-bg: rgba(124,115,96,.13); --shadow: 0 6px 24px rgba(60,48,20,.13); --row-line: rgba(122,94,30,.11); } } /* ---------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-body); color: var(--text-body); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-hi); font-weight: 600; line-height: 1.25; } p { margin: 0 0 10px; } a { color: var(--gold); text-decoration: none; transition: color .15s; } a:hover { color: var(--gold-bright); } img, svg { max-width: 100%; vertical-align: middle; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* Numbers and money read as tabular mono everywhere. */ .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .serif { font-family: var(--font-display); } /* ----------------------------------------------------------- scrollbars -- */ * { scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); } /* -------------------------------------------------------------- helpers -- */ .text-hi { color: var(--text-hi); } .text-mut { color: var(--text-mut); } .text-gold { color: var(--gold); } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-amber { color: var(--amber); } .text-right { text-align: right; } .text-center { text-align: center; } .text-nowrap { white-space: nowrap; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-16 { font-size: 16px; } .fs-18 { font-size: 18px; } .fs-22 { font-size: 22px; } .fs-26 { font-size: 26px; } .uc { text-transform: uppercase; letter-spacing: .08em; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .ml-auto { margin-left: auto; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 auto; min-width: 0; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .hidden { display: none !important; } .w-full { width: 100%; } .divider { height: 1px; background: var(--gold-border); border: 0; margin: 16px 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Screen-reader only. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }