/* ============================================================================= BakiCheck design tokens — the colour, finish and typeface pass. ============================================================================= WHAT THIS PASS IS, AND WHAT IT IS NOT LD approved the structure: "we finally got the sizing and structuring right." So the four column frame, the density, the 14 / 13 / 12 scale, the list rows and the order page regions are UNCHANGED. Nothing here moves a region, a padding, a row height or a control height. Only three things changed: 1 COLOUR Two themes the distributor switches between, Eucalyptus and Charcoal, plus a dark variant of each that keeps its character. 2 FINISH Subtly glossy. Buttons get a vertical gradient, a white inner line at the top, a dark inner line at the bottom and a small shadow. Cards get 12px corners, a top highlight and a soft wide shadow. Badges are rounded pills with a dot. ONE THING STAYS COMPLETELY MATTE: the credit answer. See THE MATTE RULE below. 3 TYPEFACE Plus Jakarta Sans. Mona Sans and Anek are retired. HOW A THEME IS SWITCHED One attribute on . Nothing else. Eucalyptus is the default, so an app that never sets the attribute is already Eucalyptus. Eucalyptus, follows the OS for dark same, stated out loud Charcoal, follows the OS for dark Eucalyptus, forced light Eucalyptus, forced dark Charcoal, forced light Charcoal, forced dark kept working: Eucalyptus light / dark Clean Cobalt, light only (Palette 3) Indigo Pop, light only (Palette 4) Monsoon, dark only (Palette 5) Teak, dark only (Palette 6) Clean Cobalt and Indigo Pop are ADDITIONAL options, designed by Iris (VISUAL-NOTE.md, directions A and B). They have no dark variant, so like the "*-light" names they stay light on a dark OS. Eucalyptus stays the default and no existing block changed. Monsoon and Teak are ADDITIONAL dark options, also by Iris. They are dark only: forced dark blocks like charcoal-dark, with no light twin, so they stay dark on a light OS. THE TOKEN RULE (six palettes now, so one convention, not two) A token that every palette uses gets a literal value in every palette block, with no fallback. A token that only one palette's design needs may live in that palette alone and be read elsewhere with a fallback to the value that was there before. The fallback is enforced by a test (test/theme.test.js, "the token rule"), not by this comment. The shared metrics in the first :root block (type, spacing, radii, layout) are not palette tokens: each has one literal there, and a palette that needs a different shape restates it in its own block. They are always declared, so they are read with no fallback either. THE CREDIT FLOOR The credit badge is held to 5.4:1, above the 4.5:1 AA floor the rest of the interface uses: it is read in daylight on a cheap screen and decides whether goods go out on credit. Every palette's four credit pairs (text on its own tint) clear it, and a test asserts it. THE GREEN, AND LD'S AMENDMENT "The green has to be a little bit darker." #3F6E5A failed the brief it was given: 80% white on it is 4.42:1, under AA, so the inactive menu links could not legally be white at 80%. The new green is #305D4A, the midpoint of the range LD named (#33604C to #2E5A47). white on #305D4A 7.52:1 white at 80% on #305D4A 5.51:1 #FFD43B pill on #305D4A 5.28:1 (the active menu pill reads as an object) THE YELLOW RULE, HELD IN BOTH THEMES In Eucalyptus yellow is both the primary button and the attention colour, so: A SOLID YELLOW FILL (#FFD43B, gradient, dark #14231C text) IS ALWAYS AN ACTION. A PALE YELLOW TINT (#FFEFA8 with #5A4300 text) IS ALWAYS A STATUS. Never the reverse. The two never swap jobs and never sit in one object. In Charcoal the primary is green, so yellow only ever means attention. Green means done or good. Red is only for overdue money, with the single standing exception of a system error sentence, which has nowhere else to go. THE MATTE RULE --credit-* below carry no gradient, no highlight and no shadow, and app.css forces background-image and box-shadow off on .credit at every size. A distributor has to read the credit answer instantly and correctly; light playing across it is decoration on the wrong element. WHERE THIS DEVIATES FROM LD'S HEX LIST, AND WHY LD asked for "other buttons white with #E4E2D6 border". #E4E2D6 on white is 1.30:1. WCAG 2.2 AA SC 1.4.11 needs 3:1 for the boundary of a control, so a button edge at 1.30:1 is not a legal button edge. #E4E2D6 is kept exactly as asked for every NON interactive edge — cards, dividers, the header rule, the step line. Interactive edges (buttons, inputs, selects) take --control-edge, the same warm neutral taken darker: #848A82, 3.54:1 on paper, 3.20:1 on the page. The same applies to the yellow primary: a #FFD43B fill on white is 1.43:1, so the button carries a #B08400 edge at 3.42:1, which is also the "thin dark line at the bottom" the glossy finish asked for. TYPEFACE Plus Jakarta Sans at 400/500/600/700/800, self hosted: /css/fonts.css, linked from each HTML file (no @import here: it blocks rendering). Store name 26px/800, card titles 15px/700, body 14px, meta 13px, labels 12px. Plus Jakarta Sans has no width axis, so the width tokens are all 100% and kept only because app.css names them. Indic runs fall to the platform's own Devanagari and Gujarati faces now that Anek is retired — no second webfont request. ============================================================================= */ :root { /* ========================================================= NON COLOUR ==== Everything below the colour blocks is identical in all four palettes. ======================================================================= */ /* ----------------------------------------------------------------- type -- */ --font-latin: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-indic: 'Noto Sans Devanagari', 'Nirmala UI', 'Noto Sans Gujarati', 'Shruti', var(--font-latin); /* no width axis in Plus Jakarta Sans: all three resolve to normal */ --wd-normal: 100%; --wd-mark: 100%; --wd-num: 100%; /* ---------------------------------------------------------------- space -- */ --sp-2: 0.125rem; --sp-4: 0.25rem; --sp-6: 0.375rem; --sp-8: 0.5rem; --sp-12: 0.75rem; --sp-16: 1rem; --sp-20: 1.25rem; --sp-24: 1.5rem; --sp-32: 2rem; --sp-40: 2.5rem; /* --------------------------------------------------------------- radius -- */ --r-4: 0.25rem; --r-6: 0.375rem; /* inputs, menu items, small controls */ --r-8: 0.5rem; /* table frames, the flagged line, the credit panel */ --r-10: 0.625rem; --r-12: 0.75rem; /* CARDS — LD: 12px corners. Also dialogs and sheets. */ --r-pill: 999px; /* badges, chips, the credit pill, the active menu pill */ /* ---------------------------------------------------------------- motion -- */ --dur-fast: 120ms; --dur-med: 160ms; --ease-out: cubic-bezier(.2, .8, .3, 1); /* ================================================================= DENSITY UNCHANGED FROM THE BUILD LD APPROVED. Bare :root is the TOUCH set; the pointer set below tightens it. The switch is on POINTER TYPE, never on viewport width, so a touch laptop keeps thumb sized targets at 1440px. ======================================================================= */ /* type sizes (touch) */ --fs-store: 1.5rem; /* 24 — the store name, one step down on touch */ --fs-title: 1.375rem; /* 22 */ --fs-card-title: 0.9375rem; /* 15 — LD: card titles 15px weight 700 */ --fs-section: 1rem; /* 16 — row names, section labels */ --fs-body: 0.9375rem; /* 15 */ --fs-meta: 0.875rem; /* 14 — the grey line */ --fs-label: 0.75rem; /* 12 — the floor */ --fs-button: 0.9375rem; /* 15 */ --fs-money: 1rem; /* 16 */ --fs-total: 1.125rem; /* 18 */ --fs-credit-pill: 0.875rem; /* 14 */ --fs-credit-word: 1.125rem; /* 18 */ --fs-credit-figure: 1.5rem; /* 24 */ --fs-indic: 0.8125rem; /* 13 — never smaller, never hidden */ --fs-wordmark: 1.125rem; /* 18 */ --fs-code: 1.75rem; /* control and row metrics (touch) */ --ctrl-h: 2.75rem; --ctrl-h-sm: 2.75rem; --input-h: 3rem; --mic-h: 3.25rem; --row-h: 4rem; --row-pad-y: var(--sp-12); --row-pad-x: var(--sp-16); --nav-h: 2.75rem; --table-row-h: 2.75rem; --credit-pill-h: 1.75rem; --chip-h: 2.75rem; --tap-min: 2.75rem; /* layout (touch) */ --gutter: var(--sp-16); --pad-card: var(--sp-16); --pad-card-main: var(--sp-16); --gap-card: var(--sp-12); --gap-section: var(--sp-16); --gap-page: var(--sp-16); /* --------------------------------------------------------- type shorthand */ --t-store: 800 var(--fs-store)/1.15 var(--font-latin); --t-title: 700 var(--fs-title)/1.2 var(--font-latin); --t-card-title: 700 var(--fs-card-title)/1.3 var(--font-latin); --t-section: 600 var(--fs-section)/1.3 var(--font-latin); --t-row-name: 600 var(--fs-section)/1.3 var(--font-latin); --t-body: 400 var(--fs-body)/1.5 var(--font-latin); --t-meta: 400 var(--fs-meta)/1.4 var(--font-latin); --t-meta-strong: 500 var(--fs-meta)/1.4 var(--font-latin); --t-label: 500 var(--fs-label)/1.3 var(--font-latin); --t-button: 600 var(--fs-button)/1 var(--font-latin); --t-money: var(--fw-figure, 600) var(--fs-money)/1.3 var(--font-figure, var(--font-latin)); --t-total: var(--fw-figure, 700) var(--fs-total)/1.2 var(--font-figure, var(--font-latin)); --t-credit-pill: 600 var(--fs-credit-pill)/1 var(--font-latin); --t-credit-word: 700 var(--fs-credit-word)/1.25 var(--font-latin); --t-credit-fig: var(--fw-figure, 700) var(--fs-credit-figure)/1.15 var(--font-figure, var(--font-latin)); --t-indic: 500 var(--fs-indic)/1.45 var(--font-indic); --t-wordmark: 800 var(--fs-wordmark)/1.2 var(--font-latin); --t-code: 700 var(--fs-code)/1.2 var(--font-latin); /* Carried as its own longhand, not inside the `font` shorthand: the CSS 2.1 shorthand grammar only admitted weights in hundreds, and an older parser that rejects 650 would drop the WHOLE font declaration. */ --fw-heavy: 700; --ls-title: -0.015em; --ls-figure: -0.02em; --ls-mark: -0.02em; --ls-normal: 0em; --ls-code: 0.3em; --num: tabular-nums; /* --font-figure and --fw-figure are NOT declared here on purpose: they are palette only tokens under THE TOKEN RULE in the header. The three figure shorthands above (--t-money, --t-total, --t-credit-fig) read them with a fallback that is exactly the old literal, so Eucalyptus and Charcoal compute the same font as before. Only Palette 4 (Indigo Pop) sets them. The same goes for the --brief-*, --chotu-* and --r-btn tokens that app.css reads with a fallback: declared by the new palettes only. */ /* --------------------------------------------------- layout metrics ------ */ --shell-max: 90rem; --shell-max-phone: 30rem; --list-col: 20rem; --list-col-wide: 30rem; /* Schemes: rows are read as a sentence, not a name, so they need real width */ --rail-col: 18rem; --sidebar-w: 14rem; --sidebar-w-collapsed: 3.5rem; --sidebar-w-phone: 18rem; --bar-h: 3.5rem; --tabbar-h: 4.5rem; --hair: 1px; --hair-strong: 2px; --stroke-icon: 1.5px; --focus-ring: 2px; --focus-offset: 2px; --icon-nav: 1rem; --icon-inline: 1rem; --icon-credit-pill: 1rem; --icon-credit-panel: 1.25rem; --dot: 0.5rem; --dot-sm: 0.375rem; --bar-ink: 3px; /* the left bar on a flagged object */ --edge-alert: 4px; /* the red top edge on the credit card */ --badge-h: 1rem; --badge-fs: 0.625rem; /* the horizontal status tracker. Sizes only; the colours are per theme. */ --track-dot: 1.125rem; /* 18px — big enough to hold a tick */ --track-tick: 0.625rem; /* 10px */ --track-gap: var(--sp-6); --textarea-min-h: 5.5rem; --sheet-max-h: 88vh; --modal-max-h: 90vh; --modal-max-w: 34rem; --toast-max-w: 90vw; --tile-min: 7rem; --field-min: 11rem; --field-sm: 8rem; --field-tiny: 4.25rem; --amount-col: 5.5rem; --label-col: 10rem; --select-min: 12rem; --grid-max-h: min(58vh, 32rem); --grid-min-w: 46rem; --cell-min: 8rem; --col-status: 8rem; --items-scroll-h: 24rem; --rail-scroll-h: 18rem; --table-max-h: 24rem; --measure: 60ch; --measure-sub: 54ch; --measure-wide: 68ch; --measure-tight: 36ch; --nudge-underline: 0.15em; --nudge-dot: 0.02em; --blur-scrim: 0.25rem; --z-sticky-sub: 18; --z-sticky-bar: 20; --z-actionbar: 15; --z-scrim: 40; --z-toast: 60; --z-dialog: 50; /* above the Chotu launcher (41) and panel (42), below toasts (60) */ /* The Dialog and the buttons (04m 4.4, W01 and W02). In px on purpose: F6 AC1 measures the dialog at 1280 wide, where the root is 14 px, and F4 states the button limits in px. */ --dialog-w-small: 380px; --dialog-w-form: 560px; --dialog-inset: 16px; --dialog-max-h: 90%; /* of the visible area: the scrim follows the area above the keyboard */ --btn-min-w: 96px; --btn-max-w: 320px; --menu-row-h: 48px; /* The sign in (04l 4.1). Size tokens only: the login adds no colour. The (pointer: fine) block does not restate them, so the login keeps thumb sized controls on a desktop, where it has only one task on the screen. */ --auth-card-max: 26rem; /* 416 */ --auth-card-pad: var(--sp-24); --auth-ctrl-h: 3rem; /* 48: phone field, text link hit area (N19) */ --auth-btn-h: 3.5rem; /* 56: two line English and Hindi label */ --auth-btn-min-w: 8rem; /* 128: buttons hug their label (F4) */ --auth-code-w: 15rem; /* 240 */ --auth-code-h: 3.5rem; /* 56 */ --auth-key: 4rem; /* 64: PIN key, never below 48 */ --auth-key-gap: var(--sp-12); --auth-dot: 1rem; /* 16 */ --auth-choice-min-h: 4.5rem; /* 72 */ --z-lock: 70; /* above the scrim (40) and the toast (60) */ } @media (max-width: 560px) { :root { --auth-card-pad: var(--sp-20); } } @media (max-height: 640px) { :root { --auth-key: 3.5rem; } } /* ============================================================================= THE STATUS PALETTE — SHARED, IDENTICAL IN BOTH LIGHT THEMES ============================================================================= Declared inside each palette block below so a single block is still a single copy/paste unit, but the values never differ between Eucalyptus and Charcoal. Success #DCEFE3 / #0C5A3A 6.89:1 Warning #FFEFA8 / #5A4300 8.12:1 Overdue #FDE7E4 / #A8200D 6.16:1 No info #EAEAE4 / #3F4A44 7.65:1 derived at the same lightness and saturation register as the three above: same pale band, same dark band, chroma taken to near zero because "we do not know" is the one answer that must not look like a verdict. ============================================================================= */ /* ============================================================================= PALETTE 1 — EUCALYPTUS, LIGHT. The default. ============================================================================= */ :root, :root[data-theme="eucalyptus"], :root[data-theme="eucalyptus-light"], :root[data-theme="light"] { color-scheme: light; /* ------------------------------------------------------- the side menu -- */ --nav-bg: #305D4A; /* LD's darker green, midpoint of his range */ --nav-ink: #FFFFFF; /* 7.52:1 on the menu */ --nav-ink-2: rgba(255, 255, 255, .80); /* inactive links — 5.51:1 */ --nav-hover: rgba(255, 255, 255, .10); --nav-edge: rgba(255, 255, 255, .16); --nav-active-bg: #FFD43B; /* the active pill — 5.28:1 against the menu */ --nav-active-top: #FFE170; /* its gradient top */ --nav-active-ink: #14231C; /* 11.45:1 on the pill */ --nav-focus: #FFFFFF; /* a focus ring that is never yellow, so the yellow rule is never muddied on the menu */ /* ----------------------------------------------------------- the header -- */ --header-bg: #FFFFFF; --header-edge: #E4E2D6; /* ------------------------------------------------- surfaces and ink ------ */ --ground: #F5F4EC; /* the page */ --paper: #FFFFFF; /* cards, tables, inputs, sheets */ --hover: #FAF9F2; /* row and list hover */ --selected: #F0EFE3; /* the current row */ --hairline: #E4E2D6; /* LD's card and divider edge, non interactive */ --card-edge: #B5B9AE; /* outline of a card and a card row, 2.00:1 on #FFFFFF */ --rule: #EDEBE0; /* the finer rule between table rows */ --control-edge: #848A82; /* INTERACTIVE edges only — 3.54:1 on paper, 3.20:1 on the page. See the note at the top. */ --ring: #C7CBBC; /* connectors and scrollbars, decorative only */ --ink: #14231C; /* 16.32:1 on paper, 14.79:1 on the page */ --ink-hover: #24382E; --text-2: #5D6A62; /* 5.67:1 on paper, 5.14:1 on the page */ --text-3: #63706A; /* 5.18:1 on paper, 4.69:1 — the lightest grey permitted anywhere in this product */ --on-ink: #FFFFFF; /* -------------------------------------------- links, prices and the mark -- */ --pine: #2F5E4A; /* 7.44:1 on paper, 6.75:1 on the page */ --focus: #2F5E4A; --price: #2F5E4A; /* LD: links and prices share one green */ --gold: #FFD43B; /* the tick in the mark, and "Baki" in the wordmark */ --gold-bright: #FFE170; /* common.js draws the mark's tick with this name */ --gold-rgb: 255, 212, 59; --pulse-rgb: 176, 132, 0; /* the live mic ring — the button's EDGE, not its fill: a yellow ring around a yellow button in Eucalyptus would simply not be seen */ --nav-mark-green: #8FE3B8; /* "Check" and the rupee glyph, on the dark nav field only — 4.96:1 on #305D4A */ /* ---------------------------------------------- credit: always matte ----- */ --ok: #0C5A3A; --ok-bg: #DCEFE3; /* 6.89:1 */ --warn: #5A4300; --warn-bg: #FFEFA8; /* 8.12:1 */ --stop: #A8200D; --stop-bg: #FDE7E4; /* 6.16:1 */ --muted: #3F4A44; --muted-bg: #EAEAE4; /* 7.65:1 */ --edge-overdue: #D92D12; /* the 4px top edge on an overdue credit card */ --decide: #34567B; /* Bulk Desk duplicate rows and nothing else — 7.0:1 */ /* ------------------------------------------------------ the status track -- */ --track-line: #E4E2D6; /* LD: step line */ --track-done: #305D4A; /* LD: done steps match the side menu */ --track-done-ink: #FFFFFF; /* 7.52:1 — the tick */ --track-now: #FFD43B; /* LD: current step */ --track-now-edge: #5A4300; /* 9.39:1 — a yellow dot on white is 1.43:1, so the ring is what makes it perceivable */ --track-now-glow: rgba(255, 212, 59, .45); --track-future: #FFFFFF; --track-future-edge: #848A82; /* 3.54:1 */ /* ================================================================= FINISH */ /* the primary: a solid yellow fill with dark text, so it is ALWAYS an action */ --btn-primary-bg: #FFD43B; --btn-primary-top: #FFE170; --btn-primary-bottom: #F0C21E; --btn-primary-ink: #14231C; /* 12.63:1 at the gradient's lightest */ --btn-primary-edge: #B08400; /* 3.42:1 — the boundary AND the dark line */ --btn-primary-hover-top: #FFE895; --btn-primary-hover-bottom: #F5CE3C; /* everything else: white, a real edge, the faintest fall to the bottom */ --ctrl-top: #FFFFFF; --ctrl-bottom: #F4F2E8; --ctrl-hover-top: #FFFFFF; --ctrl-hover-bottom: #ECEADD; --gloss-top: rgba(255, 255, 255, .55); /* the thin white inner line */ --gloss-bottom: rgba(20, 35, 28, .20); /* the thin dark inner line */ --ctrl-gloss-top: rgba(255, 255, 255, .95); --ctrl-gloss-bottom: rgba(20, 35, 28, .07); --card-gloss: rgba(255, 255, 255, .95); /* the highlight on a card's top */ --sh-rgb: 20, 35, 28; --sh-btn: 0 1px 2px rgba(20, 35, 28, .16); --sh-btn-hover: 0 2px 4px rgba(20, 35, 28, .18); --sh-btn-active: 0 0 0 rgba(20, 35, 28, 0); --sh-card: 0 1px 2px rgba(20, 35, 28, .05), 0 10px 24px rgba(20, 35, 28, .06); --sh-overlay: 0 1px 2px rgba(20, 35, 28, .08), 0 16px 40px rgba(20, 35, 28, .20); --scrim-rgb: 20, 35, 28; } /* ============================================================================= PALETTE 2 — CHARCOAL, LIGHT. Same structure, green primary, so yellow here only ever means attention and nothing has to be kept apart. ============================================================================= */ :root[data-theme="charcoal"], :root[data-theme="charcoal-light"] { color-scheme: light; --nav-bg: #1F2622; --nav-ink: #FFFFFF; /* 15.46:1 on the menu */ --nav-ink-2: rgba(255, 255, 255, .70); /* inactive links — 8.26:1 */ --nav-hover: rgba(255, 255, 255, .08); --nav-edge: rgba(255, 255, 255, .14); --nav-active-bg: #FFD43B; --nav-active-top: #FFE170; --nav-active-ink: #14231C; --nav-focus: #FFFFFF; --header-bg: #FFFFFF; --header-edge: #E3E3DE; --ground: #F4F4F1; --paper: #FFFFFF; --hover: #FAFAF8; --selected: #EFEFEB; --hairline: #E3E3DE; --card-edge: #B2B6B7; /* outline of a card and a card row, 2.05:1 on #FFFFFF */ --rule: #ECECE8; --control-edge: #83888A; /* 3.59:1 on paper, 3.26:1 on the page */ --ring: #C6C8C5; --ink: #1A1F1C; /* 16.71:1 on paper, 15.16:1 on the page */ --ink-hover: #2C3430; --text-2: #61686A; /* 5.68:1 on paper, 5.16:1 on the page */ --text-3: #6A7173; /* 5.06:1 on paper, 4.59:1 on the page */ --on-ink: #FFFFFF; --pine: #0F5A3D; /* 8.24:1 on paper, 7.47:1 on the page */ --focus: #0F5A3D; --price: #0F5A3D; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 11, 74, 50; /* the green button's own darker edge */ --nav-mark-green: #7FD2A8; /* "Check" and the rupee glyph, on the dark nav field only — 8.6:1 on #1F2622 */ --ok: #0C5A3A; --ok-bg: #DCEFE3; --warn: #5A4300; --warn-bg: #FFEFA8; --stop: #A8200D; --stop-bg: #FDE7E4; --muted: #3F4A44; --muted-bg: #EAEAE4; --edge-overdue: #D92D12; --decide: #34567B; --track-line: #E3E3DE; --track-done: #0F5A3D; /* LD: done steps #0F5A3D */ --track-done-ink: #FFFFFF; /* 8.24:1 */ --track-now: #FFD43B; --track-now-edge: #5A4300; --track-now-glow: rgba(255, 212, 59, .45); --track-future: #FFFFFF; --track-future-edge: #83888A; /* the primary is green here, so the yellow is free to mean attention only */ --btn-primary-bg: #0F5A3D; --btn-primary-top: #1C7A55; --btn-primary-bottom: #0B4A32; --btn-primary-ink: #FFFFFF; /* 5.30:1 at the gradient's lightest */ --btn-primary-edge: #0B4A32; --btn-primary-hover-top: #228B61; --btn-primary-hover-bottom: #0E573A; --ctrl-top: #FFFFFF; --ctrl-bottom: #F3F3F0; --ctrl-hover-top: #FFFFFF; --ctrl-hover-bottom: #EAEAE6; --gloss-top: rgba(255, 255, 255, .26); --gloss-bottom: rgba(0, 0, 0, .28); --ctrl-gloss-top: rgba(255, 255, 255, .95); --ctrl-gloss-bottom: rgba(26, 31, 28, .07); --card-gloss: rgba(255, 255, 255, .95); --sh-rgb: 26, 31, 28; --sh-btn: 0 1px 2px rgba(26, 31, 28, .18); --sh-btn-hover: 0 2px 4px rgba(26, 31, 28, .20); --sh-btn-active: 0 0 0 rgba(26, 31, 28, 0); --sh-card: 0 1px 2px rgba(26, 31, 28, .05), 0 10px 24px rgba(26, 31, 28, .06); --sh-overlay: 0 1px 2px rgba(26, 31, 28, .08), 0 16px 40px rgba(26, 31, 28, .22); --scrim-rgb: 26, 31, 28; } /* ============================================================================= PALETTE 3 — CLEAN COBALT, LIGHT ONLY. Iris, direction A. An additional option; it never applies unless the account picks it. A white bar and side menu on hairlines, a cool slate page, and one saturated cobalt for action, links and the Chotu brief. Prices are ink. Flat: no gradient, no gloss, a 2px shadow at most. Typeface: the platform's own sans (Roboto on Android) instead of the Inter in the mockup, so this theme asks for no new font file. Contrast (WCAG 2.x, measured from these values): credit ok 5.92 warn 7.21 stop 6.05 muted 9.49 (text on its own tint; the credit floor is 5.4, see THE CREDIT FLOOR above) bar ink 18.72 ink-2 7.69 focus 6.00 mark 6.00 "Baki" 18.72 on #FFFFFF brief white 6.00 ink-2 4.80 on #1652F0 primary white on #1652F0 6.00 ============================================================================= */ :root[data-theme="cobalt"] { color-scheme: light; --font-latin: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --nav-bg: #FFFFFF; --nav-ink: #0B1220; --nav-ink-2: #475467; --nav-hover: #F2F4F7; --nav-edge: #E4E7EC; --nav-active-bg: #EAF0FF; --nav-active-top: #EAF0FF; --nav-active-ink: #1546D8; --nav-focus: #1652F0; --header-bg: #FFFFFF; --header-edge: #E4E7EC; --ground: #F5F7FA; --paper: #FFFFFF; --hover: #F8FAFC; --selected: #EEF2FF; --hairline: #E4E7EC; --card-edge: #B0B5C0; /* outline of a card and a card row, 2.06:1 on #FFFFFF */ --rule: #EEF0F3; --control-edge: #8790A0; /* 3.22:1 on paper */ --ring: #D0D5DD; --ink: #0B1220; --ink-hover: #1D2939; --text-2: #475467; --text-3: #5B6576; --on-ink: #FFFFFF; --pine: #1546D8; --focus: #1652F0; --price: #0B1220; --gold: #0B1220; --gold-bright: #FFFFFF; --gold-rgb: 22, 82, 240; --pulse-rgb: 21, 70, 216; --nav-mark-green: #1652F0; /* "Check" and the rupee glyph on the white bar — 6.00:1 on #FFFFFF */ --ok: #066F43; --ok-bg: #ECFDF3; /* #067647 was 5.40:1, on the 5.4 credit floor */ --warn: #93370D; --warn-bg: #FFFAEB; --stop: #B42318; --stop-bg: #FEF3F2; --muted: #344054; --muted-bg: #F2F4F7; --edge-overdue: #D92D20; --decide: #34567B; --track-line: #E4E7EC; --track-done: #1652F0; --track-done-ink: #FFFFFF; --track-now: #EAF0FF; --track-now-edge: #1652F0; --track-now-glow: rgba(22, 82, 240, .25); --track-future: #FFFFFF; --track-future-edge: #8790A0; --btn-primary-bg: #1652F0; --btn-primary-top: #1652F0; --btn-primary-bottom: #1652F0; --btn-primary-ink: #FFFFFF; --btn-primary-edge: #1652F0; --btn-primary-hover-top: #1546D8; --btn-primary-hover-bottom: #1546D8; --ctrl-top: #FFFFFF; --ctrl-bottom: #FFFFFF; --ctrl-hover-top: #F8FAFC; --ctrl-hover-bottom: #F8FAFC; --gloss-top: transparent; --gloss-bottom: transparent; --ctrl-gloss-top: transparent; --ctrl-gloss-bottom: transparent; --card-gloss: transparent; --sh-rgb: 16, 24, 40; --sh-btn: 0 1px 2px rgba(16, 24, 40, .05); --sh-btn-hover: 0 1px 3px rgba(16, 24, 40, .10); --sh-btn-active: 0 0 0 rgba(16, 24, 40, 0); --sh-card: 0 1px 2px rgba(16, 24, 40, .06); --sh-overlay: 0 4px 12px rgba(16, 24, 40, .12); --scrim-rgb: 16, 24, 40; /* corners: buttons 8px, cards 10px, the credit panel 6px */ --r-8: 0.375rem; --r-10: 0.5rem; --r-12: 0.625rem; /* the bar is white here, so the Chotu brief, launcher and panel head get their own field (they read --nav-* in every other palette) */ --brief-bg: #1652F0; --brief-ink: #FFFFFF; --brief-ink-2: #DCE6FF; --brief-hl: #FFFFFF; --brief-field: #2D63F2; --brief-focus: #FFFFFF; /* and Chotu keeps today's face with a dark cap and kurta, instead of vanishing into a white bar */ --chotu-badge: #FFD43B; --chotu-kurta: #0B1220; --chotu-collar: rgba(255, 255, 255, .80); --chotu-skin: #FFFFFF; --chotu-cap: #0B1220; --chotu-ink: #14231C; } /* ============================================================================= PALETTE 4 — INDIGO POP, LIGHT ONLY. Iris, direction B. An additional option. A deep indigo bar and side menu, a lavender grey page, violet pill buttons, and lime for "Baki", Chotu's figures and the current tracker step. Figures are set heavier (800). Flat buttons, no gloss. SHADOWS: one value everywhere, A's flat 1px card shadow. Iris asked for it on low end phones, and no query can tell a cheap phone from a dear one (pointer type measures input precision, not device tier), so the softer 4px/12px card shadow is not shipped at all rather than guessed at. Typeface: Plus Jakarta Sans, already loaded, in place of the mockup's Manrope and Sora, so this theme asks for no new font file. Its 800 weight is already in the existing font request. Store tiles keep their own --r-10 corner: only buttons go pill, via --r-btn. Contrast (WCAG 2.x, measured from these values): credit ok 6.79 warn 6.37 stop 5.51 muted 9.26 (text on its own tint; the credit floor is 5.4) bar white 16.44 ink-2 9.81 lime 12.72 on #1E1452 primary white on #5B3DF5 6.12 ============================================================================= */ :root[data-theme="indigo"] { color-scheme: light; --nav-bg: #1E1452; --nav-ink: #FFFFFF; --nav-ink-2: #C9C3EE; --nav-hover: #2A2063; --nav-edge: #352B70; --nav-active-bg: #C8F169; --nav-active-top: #C8F169; --nav-active-ink: #1E1452; --nav-focus: #C8F169; --header-bg: #FFFFFF; --header-edge: #E6E3F3; --ground: #F0EFF8; --paper: #FFFFFF; --hover: #F7F6FC; --selected: #EEEBFC; --hairline: #E6E3F3; --card-edge: #B6B3C9; /* outline of a card and a card row, 2.04:1 on #FFFFFF */ --rule: #EFEDF7; --control-edge: #8A84A8; /* 3.53:1 on paper */ --ring: #D3CFEA; --ink: #15112E; --ink-hover: #2A2450; --text-2: #4E4970; --text-3: #5E5980; --on-ink: #FFFFFF; --pine: #4F2FE6; --focus: #5B3DF5; --price: #15112E; --gold: #C8F169; --gold-bright: #1E1452; --gold-rgb: 200, 241, 105; --pulse-rgb: 91, 61, 245; --nav-mark-green: #FFFFFF; /* "Check" and the rupee glyph, on the indigo field only — 16.44:1 on #1E1452 */ --ok: #05603A; --ok-bg: #DFF7E9; --warn: #8A4500; --warn-bg: #FFF0D6; --stop: #C0112B; --stop-bg: #FFECEE; --muted: #3D3960; --muted-bg: #EEEDF6; --edge-overdue: #E5163A; --decide: #34567B; --track-line: #E6E3F3; --track-done: #5B3DF5; --track-done-ink: #FFFFFF; --track-now: #C8F169; --track-now-edge: #1E1452; --track-now-glow: rgba(200, 241, 105, .45); --track-future: #FFFFFF; --track-future-edge: #8A84A8; --btn-primary-bg: #5B3DF5; --btn-primary-top: #5B3DF5; --btn-primary-bottom: #5B3DF5; --btn-primary-ink: #FFFFFF; --btn-primary-edge: #5B3DF5; --btn-primary-hover-top: #4F2FE6; --btn-primary-hover-bottom: #4F2FE6; --ctrl-top: #FFFFFF; --ctrl-bottom: #FFFFFF; --ctrl-hover-top: #F7F6FC; --ctrl-hover-bottom: #F7F6FC; --gloss-top: transparent; --gloss-bottom: transparent; --ctrl-gloss-top: transparent; --ctrl-gloss-bottom: transparent; --card-gloss: transparent; --sh-rgb: 30, 20, 82; --sh-btn: 0 0 0 transparent; --sh-btn-hover: 0 0 0 transparent; --sh-btn-active: 0 0 0 transparent; --sh-card: 0 1px 2px rgba(30, 20, 82, .06); /* A's flat value, the only one, see above */ --sh-overlay: 0 4px 16px rgba(30, 20, 82, .16); --scrim-rgb: 30, 20, 82; /* corners: pill buttons, 20px cards, a 14px credit panel. --r-10 is left alone so the salesman's store tiles stay rounded squares, not circles. */ --r-8: 0.875rem; --r-12: 1.25rem; --r-btn: var(--r-pill); /* chunky figures: money, totals and the credit figure */ --fw-heavy: 800; --fw-figure: 800; --font-figure: var(--font-latin); } /* ============================================================================= THE DARK VARIANTS. Opt in or OS led, never the default: this product is read at a shop counter in daylight. Each one keeps its own character — Eucalyptus stays green all the way down, Charcoal stays neutral. Same roles, same shapes, same rules; only the values move. The credit tints stay tints. ============================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="eucalyptus"] { color-scheme: dark; --nav-bg: #1B342A; /* white 13.37:1, 80% white 9.12:1 */ --nav-ink: #FFFFFF; --nav-ink-2: rgba(255, 255, 255, .80); --nav-hover: rgba(255, 255, 255, .08); --nav-edge: rgba(255, 255, 255, .14); --nav-active-bg: #FFD43B; --nav-active-top: #FFE170; --nav-active-ink: #14231C; --nav-focus: #FFFFFF; --header-bg: #17241E; --header-edge: #2A3B33; --ground: #101A15; --paper: #17241E; --hover: #1D2C25; --selected: #24352C; --hairline: #2A3B33; --card-edge: #48554E; /* outline of a card and a card row, 2.05:1 on #17241E */ --rule: #223128; --control-edge: #7E8A82; --ring: #3A4A41; --ink: #EDF2EE; /* 14.18:1 on paper */ --ink-hover: #FFFFFF; --text-2: #A8B6AE; /* 7.62:1 on paper */ --text-3: #93A199; /* 5.96:1 on paper */ --on-ink: #101A15; --pine: #7FD2A8; /* 8.94:1 on paper */ --focus: #7FD2A8; --price: #7FD2A8; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 127, 210, 168; /* a light ring is what reads on a dark field */ --nav-mark-green: #8FE3B8; /* "Check" and the rupee glyph, on the dark nav field only */ --ok: #55D6A0; --ok-bg: #0E2E22; --warn: #F2C75B; --warn-bg: #33270A; --stop: #FF9A8A; --stop-bg: #3A1714; --muted: #B4BDB7; --muted-bg: #242D28; --edge-overdue: #FF6A4D; --decide: #8FB6DE; --track-line: #2A3B33; --track-done: #2E7C5B; --track-done-ink: #FFFFFF; --track-now: #FFD43B; --track-now-edge: #7A5E12; --track-now-glow: rgba(255, 212, 59, .30); --track-future: #17241E; --track-future-edge: #7E8A82; --btn-primary-bg: #FFD43B; --btn-primary-top: #FFE170; --btn-primary-bottom: #F0C21E; --btn-primary-ink: #14231C; --btn-primary-edge: #C79A14; --btn-primary-hover-top: #FFE895; --btn-primary-hover-bottom: #F5CE3C; --ctrl-top: #1F3128; --ctrl-bottom: #17241E; --ctrl-hover-top: #263B31; --ctrl-hover-bottom: #1D2C25; --gloss-top: rgba(255, 255, 255, .18); --gloss-bottom: rgba(0, 0, 0, .40); --ctrl-gloss-top: rgba(255, 255, 255, .10); --ctrl-gloss-bottom: rgba(0, 0, 0, .30); --card-gloss: rgba(255, 255, 255, .06); --sh-rgb: 0, 0, 0; --sh-btn: 0 1px 2px rgba(0, 0, 0, .55); --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6); --sh-btn-active: 0 0 0 rgba(0, 0, 0, 0); --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .45); --sh-overlay: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); --scrim-rgb: 0, 0, 0; } :root[data-theme="charcoal"] { color-scheme: dark; --nav-bg: #141815; --nav-ink: #FFFFFF; --nav-ink-2: rgba(255, 255, 255, .70); --nav-hover: rgba(255, 255, 255, .07); --nav-edge: rgba(255, 255, 255, .12); --nav-active-bg: #FFD43B; --nav-active-top: #FFE170; --nav-active-ink: #14231C; --nav-focus: #FFFFFF; --header-bg: #1A1D1A; --header-edge: #2C302D; --ground: #111311; --paper: #1A1D1A; --hover: #212522; --selected: #292E2A; --hairline: #2C302D; --card-edge: #4B4F4C; /* outline of a card and a card row, 2.04:1 on #1A1D1A */ --rule: #252925; --control-edge: #848A86; --ring: #3D423E; --ink: #EEF0EE; --ink-hover: #FFFFFF; --text-2: #AFB5B1; --text-3: #99A09B; --on-ink: #111311; --pine: #63CD9C; --focus: #63CD9C; --price: #63CD9C; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 99, 205, 156; --nav-mark-green: #7FD2A8; /* "Check" and the rupee glyph, on the dark nav field only */ --ok: #55D6A0; --ok-bg: #0E2E22; --warn: #F2C75B; --warn-bg: #33270A; --stop: #FF9A8A; --stop-bg: #3A1714; --muted: #B4BDB7; --muted-bg: #262A27; --edge-overdue: #FF6A4D; --decide: #8FB6DE; --track-line: #2C302D; --track-done: #1B7A54; --track-done-ink: #FFFFFF; --track-now: #FFD43B; --track-now-edge: #7A5E12; --track-now-glow: rgba(255, 212, 59, .30); --track-future: #1A1D1A; --track-future-edge: #848A86; --btn-primary-bg: #1B7A54; --btn-primary-top: #229163; --btn-primary-bottom: #146846; --btn-primary-ink: #FFFFFF; --btn-primary-edge: #0E5238; --btn-primary-hover-top: #2AA372; --btn-primary-hover-bottom: #18744F; --ctrl-top: #232723; --ctrl-bottom: #1A1D1A; --ctrl-hover-top: #2A2F2B; --ctrl-hover-bottom: #212522; --gloss-top: rgba(255, 255, 255, .16); --gloss-bottom: rgba(0, 0, 0, .40); --ctrl-gloss-top: rgba(255, 255, 255, .08); --ctrl-gloss-bottom: rgba(0, 0, 0, .30); --card-gloss: rgba(255, 255, 255, .05); --sh-rgb: 0, 0, 0; --sh-btn: 0 1px 2px rgba(0, 0, 0, .55); --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6); --sh-btn-active: 0 0 0 rgba(0, 0, 0, 0); --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .45); --sh-overlay: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); --scrim-rgb: 0, 0, 0; } } /* ============================================================================= FORCED DARK. The two blocks above are OS led; these two are the same values under a name the distributor can pick on purpose, whatever the OS says. They sit AFTER the media query so they win at equal specificity. KEEP IN SYNC with the matching block inside @media (prefers-color-scheme: dark) above — same values, different trigger. The light palettes need no twin: the media query deliberately does not match "*-light", so Palette 1 and Palette 2 already stand on a dark OS when they are asked for by name. ============================================================================= */ :root[data-theme="eucalyptus-dark"], :root[data-theme="dark"] { color-scheme: dark; --nav-bg: #1B342A; --nav-ink: #FFFFFF; --nav-ink-2: rgba(255, 255, 255, .80); --nav-hover: rgba(255, 255, 255, .08); --nav-edge: rgba(255, 255, 255, .14); --nav-active-bg: #FFD43B; --nav-active-top: #FFE170; --nav-active-ink: #14231C; --nav-focus: #FFFFFF; --header-bg: #17241E; --header-edge: #2A3B33; --ground: #101A15; --paper: #17241E; --hover: #1D2C25; --selected: #24352C; --hairline: #2A3B33; --card-edge: #48554E; /* outline of a card and a card row, 2.05:1 on #17241E */ --rule: #223128; --control-edge: #7E8A82; --ring: #3A4A41; --ink: #EDF2EE; --ink-hover: #FFFFFF; --text-2: #A8B6AE; --text-3: #93A199; --on-ink: #101A15; --pine: #7FD2A8; --focus: #7FD2A8; --price: #7FD2A8; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 127, 210, 168; --nav-mark-green: #8FE3B8; /* "Check" and the rupee glyph, on the dark nav field only */ --ok: #55D6A0; --ok-bg: #0E2E22; --warn: #F2C75B; --warn-bg: #33270A; --stop: #FF9A8A; --stop-bg: #3A1714; --muted: #B4BDB7; --muted-bg: #242D28; --edge-overdue: #FF6A4D; --decide: #8FB6DE; --track-line: #2A3B33; --track-done: #2E7C5B; --track-done-ink: #FFFFFF; --track-now: #FFD43B; --track-now-edge: #7A5E12; --track-now-glow: rgba(255, 212, 59, .30); --track-future: #17241E; --track-future-edge: #7E8A82; --btn-primary-bg: #FFD43B; --btn-primary-top: #FFE170; --btn-primary-bottom: #F0C21E; --btn-primary-ink: #14231C; --btn-primary-edge: #C79A14; --btn-primary-hover-top: #FFE895; --btn-primary-hover-bottom: #F5CE3C; --ctrl-top: #1F3128; --ctrl-bottom: #17241E; --ctrl-hover-top: #263B31; --ctrl-hover-bottom: #1D2C25; --gloss-top: rgba(255, 255, 255, .18); --gloss-bottom: rgba(0, 0, 0, .40); --ctrl-gloss-top: rgba(255, 255, 255, .10); --ctrl-gloss-bottom: rgba(0, 0, 0, .30); --card-gloss: rgba(255, 255, 255, .06); --sh-rgb: 0, 0, 0; --sh-btn: 0 1px 2px rgba(0, 0, 0, .55); --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6); --sh-btn-active: 0 0 0 rgba(0, 0, 0, 0); --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .45); --sh-overlay: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); --scrim-rgb: 0, 0, 0; } :root[data-theme="charcoal-dark"] { color-scheme: dark; --nav-bg: #141815; --nav-ink: #FFFFFF; --nav-ink-2: rgba(255, 255, 255, .70); --nav-hover: rgba(255, 255, 255, .07); --nav-edge: rgba(255, 255, 255, .12); --nav-active-bg: #FFD43B; --nav-active-top: #FFE170; --nav-active-ink: #14231C; --nav-focus: #FFFFFF; --header-bg: #1A1D1A; --header-edge: #2C302D; --ground: #111311; --paper: #1A1D1A; --hover: #212522; --selected: #292E2A; --hairline: #2C302D; --card-edge: #4B4F4C; /* outline of a card and a card row, 2.04:1 on #1A1D1A */ --rule: #252925; --control-edge: #848A86; --ring: #3D423E; --ink: #EEF0EE; --ink-hover: #FFFFFF; --text-2: #AFB5B1; --text-3: #99A09B; --on-ink: #111311; --pine: #63CD9C; --focus: #63CD9C; --price: #63CD9C; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 99, 205, 156; --nav-mark-green: #7FD2A8; /* "Check" and the rupee glyph, on the dark nav field only */ --ok: #55D6A0; --ok-bg: #0E2E22; --warn: #F2C75B; --warn-bg: #33270A; --stop: #FF9A8A; --stop-bg: #3A1714; --muted: #B4BDB7; --muted-bg: #262A27; --edge-overdue: #FF6A4D; --decide: #8FB6DE; --track-line: #2C302D; --track-done: #1B7A54; --track-done-ink: #FFFFFF; --track-now: #FFD43B; --track-now-edge: #7A5E12; --track-now-glow: rgba(255, 212, 59, .30); --track-future: #1A1D1A; --track-future-edge: #848A86; --btn-primary-bg: #1B7A54; --btn-primary-top: #229163; --btn-primary-bottom: #146846; --btn-primary-ink: #FFFFFF; --btn-primary-edge: #0E5238; --btn-primary-hover-top: #2AA372; --btn-primary-hover-bottom: #18744F; --ctrl-top: #232723; --ctrl-bottom: #1A1D1A; --ctrl-hover-top: #2A2F2B; --ctrl-hover-bottom: #212522; --gloss-top: rgba(255, 255, 255, .16); --gloss-bottom: rgba(0, 0, 0, .40); --ctrl-gloss-top: rgba(255, 255, 255, .08); --ctrl-gloss-bottom: rgba(0, 0, 0, .30); --card-gloss: rgba(255, 255, 255, .05); --sh-rgb: 0, 0, 0; --sh-btn: 0 1px 2px rgba(0, 0, 0, .55); --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6); --sh-btn-active: 0 0 0 rgba(0, 0, 0, 0); --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .45); --sh-overlay: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); --scrim-rgb: 0, 0, 0; } /* ============================================================================= PALETTE 5 — MONSOON, DARK ONLY. Iris, an additional dark option. A cool slate blue night with a sky blue primary and a dark navy label: bluer and colder than Charcoal, which is a neutral green grey with a green primary. Same 73 tokens in the same order as charcoal-dark, so it is a forced dark block: it stays dark whatever the OS says, and has no light twin. Pending stays grey (the --muted pair), as in every other palette. Contrast (WCAG 2.x, measured from these values): credit ok 8.73 warn 8.86 stop 7.22 muted 7.57 (text on its own tint) text ink 13.61 text-2 8.65 text-3 7.03 on --paper primary #07182A on #8CCBFF 10.32 (8.84 at the gradient bottom) ============================================================================= */ :root[data-theme="monsoon"] { color-scheme: dark; --nav-bg: #091017; --nav-ink: #FFFFFF; --nav-ink-2: rgba(255, 255, 255, .74); --nav-hover: rgba(255, 255, 255, .08); --nav-edge: rgba(255, 255, 255, .14); --nav-active-bg: #8CCBFF; --nav-active-top: #A6D7FF; --nav-active-ink: #07182A; --nav-focus: #FFFFFF; --header-bg: #1B2632; --header-edge: #3A4B60; --ground: #0D131A; --paper: #1B2632; --hover: #223040; --selected: #2A394B; --hairline: #3A4B60; --card-edge: #475668; /* outline of a card and a card row, 2.04:1 on #1B2632 */ --rule: #2C3A4B; --control-edge: #8095AD; --ring: #3E5066; --ink: #EDF2F7; --ink-hover: #FFFFFF; --text-2: #B7C4D3; --text-3: #A3B1C2; --on-ink: #0D131A; --pine: #8CCBFF; --focus: #8CCBFF; --price: #8CCBFF; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 140, 203, 255; --nav-mark-green: #7FD2A8; --ok: #7EE2A0; --ok-bg: #123321; --warn: #F6CF62; --warn-bg: #3B2E0B; --stop: #FF9F95; --stop-bg: #4A1C1C; --muted: #C4CEDA; --muted-bg: #2C3746; --edge-overdue: #FF6A5C; --decide: #CBB8FF; --track-line: #3A4B60; --track-done: #3C6E98; --track-done-ink: #FFFFFF; --track-now: #8CCBFF; --track-now-edge: #3C6E98; --track-now-glow: rgba(140, 203, 255, .30); --track-future: #1B2632; --track-future-edge: #8095AD; --btn-primary-bg: #8CCBFF; --btn-primary-top: #A6D7FF; --btn-primary-bottom: #74BDF7; --btn-primary-ink: #07182A; --btn-primary-edge: #3C6E98; --btn-primary-hover-top: #B8E0FF; --btn-primary-hover-bottom: #84C6FA; --ctrl-top: #243241; --ctrl-bottom: #1B2632; --ctrl-hover-top: #2B3B4D; --ctrl-hover-bottom: #223040; --gloss-top: rgba(255, 255, 255, .22); --gloss-bottom: rgba(0, 0, 0, .30); --ctrl-gloss-top: rgba(255, 255, 255, .08); --ctrl-gloss-bottom: rgba(0, 0, 0, .30); --card-gloss: rgba(255, 255, 255, .05); --sh-rgb: 0, 0, 0; --sh-btn: 0 1px 2px rgba(0, 0, 0, .55); --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6); --sh-btn-active: 0 0 0 rgba(0, 0, 0, 0); --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .40); --sh-overlay: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); --scrim-rgb: 0, 0, 0; } /* ============================================================================= PALETTE 6 — TEAK, DARK ONLY. Iris, an additional dark option. A warm teak brown night with a marigold primary and a dark brown label, like a lamp lit counter. The yellow rule holds: a solid marigold fill is always an action, the pale amber tint is always a status. Forced dark like Monsoon. Pending stays grey (the --muted pair), as in every other palette. Contrast (WCAG 2.x, measured from these values): credit ok 8.40 warn 9.22 stop 7.17 muted 7.92 (text on its own tint) text ink 14.09 text-2 8.92 text-3 7.09 on --paper primary #1E1406 on #F6B73C 10.15 (8.48 at the gradient bottom) ============================================================================= */ :root[data-theme="teak"] { color-scheme: dark; --nav-bg: #0F0C09; --nav-ink: #FFFFFF; --nav-ink-2: rgba(255, 255, 255, .74); --nav-hover: rgba(255, 255, 255, .08); --nav-edge: rgba(255, 255, 255, .14); --nav-active-bg: #F6B73C; --nav-active-top: #FFC95E; --nav-active-ink: #1E1406; --nav-focus: #FFFFFF; --header-bg: #26201A; --header-edge: #4A4036; --ground: #110E0B; --paper: #26201A; --hover: #2E2720; --selected: #372F27; --hairline: #4A4036; --card-edge: #5A5046; /* outline of a card and a card row, 2.05:1 on #26201A */ --rule: #362E26; --control-edge: #9A8D7E; --ring: #4D4339; --ink: #F5EFE6; --ink-hover: #FFFFFF; --text-2: #CCBFAE; --text-3: #B8AA98; --on-ink: #110E0B; --pine: #F0C27A; --focus: #F6B73C; --price: #F0C27A; --gold: #FFD43B; --gold-bright: #FFE170; --gold-rgb: 255, 212, 59; --pulse-rgb: 246, 183, 60; --nav-mark-green: #8FD9AE; --ok: #7FDCA4; --ok-bg: #143222; --warn: #F5D76E; --warn-bg: #3A300C; --stop: #FF9F8F; --stop-bg: #4A1D17; --muted: #CFC6BA; --muted-bg: #352E27; --edge-overdue: #FF6A4D; --decide: #A9C8FF; --track-line: #4A4036; --track-done: #8A5E10; --track-done-ink: #FFFFFF; --track-now: #F6B73C; --track-now-edge: #8A5E10; --track-now-glow: rgba(246, 183, 60, .30); --track-future: #26201A; --track-future-edge: #9A8D7E; --btn-primary-bg: #F6B73C; --btn-primary-top: #FFC95E; --btn-primary-bottom: #E7A52A; --btn-primary-ink: #1E1406; --btn-primary-edge: #8A5E10; --btn-primary-hover-top: #FFD47A; --btn-primary-hover-bottom: #EFB13C; --ctrl-top: #2F2821; --ctrl-bottom: #26201A; --ctrl-hover-top: #383028; --ctrl-hover-bottom: #2E2720; --gloss-top: rgba(255, 255, 255, .28); --gloss-bottom: rgba(0, 0, 0, .30); --ctrl-gloss-top: rgba(255, 255, 255, .08); --ctrl-gloss-bottom: rgba(0, 0, 0, .30); --card-gloss: rgba(255, 255, 255, .05); --sh-rgb: 0, 0, 0; --sh-btn: 0 1px 2px rgba(0, 0, 0, .55); --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6); --sh-btn-active: 0 0 0 rgba(0, 0, 0, 0); --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .40); --sh-overlay: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); --scrim-rgb: 0, 0, 0; } /* ============================================================================= POINTER DENSITY — UNCHANGED. A mouse on the billing desk: 14 / 13 / 12px, 32px controls, 56px rows. The touch set above never drops below 44px. This is the sizing LD signed off; nothing in this pass touches it except the two type sizes he named himself, the store name and the card title. ============================================================================= */ @media (pointer: fine) { :root { --fs-store: 1.625rem; /* 26 — LD: store name 26px weight 800 */ --fs-title: 1.25rem; /* 20 */ --fs-card-title: 0.9375rem; /* 15 — LD: card titles 15px weight 700 */ --fs-section: 0.875rem; /* 14 */ --fs-body: 0.875rem; /* 14 */ --fs-meta: 0.8125rem; /* 13 */ --fs-label: 0.75rem; /* 12 */ --fs-button: 0.8125rem; /* 13 */ --fs-money: 0.875rem; /* 14 */ --fs-total: 1rem; /* 16 */ --fs-credit-pill: 0.8125rem; /* 13 */ --fs-credit-word: 1rem; /* 16 */ --fs-credit-figure: 1.25rem; /* 20 */ --fs-wordmark: 1.125rem; /* 18 */ --fs-code: 1.5rem; --ctrl-h: 2rem; /* 32 */ --ctrl-h-sm: 1.75rem; /* 28 */ --input-h: 2rem; /* 32 */ --mic-h: 2.5rem; --row-h: 3.5rem; /* 56 */ --row-pad-y: var(--sp-8); --row-pad-x: var(--sp-16); --nav-h: 2rem; /* 32 */ --table-row-h: 2.5rem; /* 40 */ --credit-pill-h: 1.5rem; /* 24 */ --chip-h: 1.75rem; /* 28 */ --tap-min: 2rem; --gutter: var(--sp-24); --pad-card: var(--sp-16); --pad-card-main: var(--sp-20); --gap-card: var(--sp-12); --gap-section: var(--sp-16); --gap-page: var(--sp-16); --textarea-min-h: 5rem; --items-scroll-h: 26rem; --rail-scroll-h: 20rem; --table-max-h: 26rem; } } /* the phone line: the gutter tightens, rows and targets do not */ @media (max-width: 560px) { :root { --gutter: var(--sp-16); --pad-card: var(--sp-16); --pad-card-main: var(--sp-16); --items-scroll-h: 22rem; --rail-scroll-h: 16rem; } } /* ============================================================================= PRINT. An invoice leaves the building on paper, so it is forced back to a light, ink safe palette whatever theme the screen was set to, the gloss is switched off (a gradient on a cheap inkjet is a smear), and the hairlines darken enough to survive. app.css owns WHICH elements print; this owns the colour they print in, so no literal colour ever appears outside this file. ============================================================================= */ @media print { :root, :root[data-theme="eucalyptus"], :root[data-theme="eucalyptus-light"], :root[data-theme="eucalyptus-dark"], :root[data-theme="charcoal"], :root[data-theme="charcoal-light"], :root[data-theme="charcoal-dark"], :root[data-theme="cobalt"], :root[data-theme="indigo"], :root[data-theme="monsoon"], :root[data-theme="teak"], :root[data-theme="light"], :root[data-theme="dark"], :root:not([data-theme]) { color-scheme: light; --ground: #FFFFFF; --paper: #FFFFFF; --hover: #FFFFFF; --selected: #FFFFFF; --hairline: #B6B8AE; --card-edge: #B6B8AE; /* outline of a card and a card row, the print --hairline */ --rule: #CDCFC5; --control-edge: #6B7280; --header-bg: #FFFFFF; --header-edge: #B6B8AE; --ink: #000000; --ink-hover: #000000; --text-2: #33373E; --text-3: #474C55; --on-ink: #FFFFFF; --pine: #0F4230; --price: #000000; /* money prints black: a colour figure on a mono printer is a grey figure, and this is a bill */ --focus: #000000; --gold: #000000; --gold-bright: #000000; --gold-rgb: 0, 0, 0; --pulse-rgb: 0, 0, 0; --ok: #055A36; --ok-bg: #FFFFFF; --warn: #4A3700; --warn-bg: #FFFFFF; --stop: #8E1E18; --stop-bg: #FFFFFF; --muted: #3D444F; --muted-bg: #FFFFFF; --edge-overdue: #8E1E18; --track-line: #B6B8AE; --track-done: #000000; --track-done-ink: #FFFFFF; --track-now: #FFFFFF; --track-now-edge: #000000; --track-now-glow: transparent; --track-future: #FFFFFF; --track-future-edge: #6B7280; --btn-primary-bg: #FFFFFF; --btn-primary-top: #FFFFFF; --btn-primary-bottom: #FFFFFF; --btn-primary-ink: #000000; --btn-primary-edge: #000000; --ctrl-top: #FFFFFF; --ctrl-bottom: #FFFFFF; --ctrl-hover-top: #FFFFFF; --ctrl-hover-bottom: #FFFFFF; --gloss-top: transparent; --gloss-bottom: transparent; --ctrl-gloss-top: transparent; --ctrl-gloss-bottom: transparent; --card-gloss: transparent; --sh-btn: none; --sh-btn-hover: none; --sh-btn-active: none; --sh-card: none; --sh-overlay: none; } }