/* * Default palette — terracotta + cream * * Each palette file is responsible for: * 1. Loading its own fonts (via @import url(...) at the top, before :root). * 2. Defining EVERY token listed in the contract below — missing tokens * cause silent visual breakage because theme.css references them * via var(...) with no fallback. * * The token names start with `--p-` (palette) to keep them clearly separate * from Tailwind's emitted `--color-*` / `--font-*` design tokens. The mapping * from `--p-*` to Tailwind's namespace happens in src/input.css via @theme. * * To author a new palette: copy this file, change values, never delete keys. */ @import url('https://rsms.me/inter/inter.css'); :root { /* === Brand =================================================== * The primary interactive / brand color family. * Pick one accent hue; the other three are derived from it. * ----------------------------------------------------------- */ /* Primary brand color. Used on: CTA buttons, active tracker dots, * discount/badge backgrounds, price display, active selection borders, * filter chip hover, carousel nav buttons, lightbox close button. */ --p-accent: #b8462b; /* Darker shade of accent. Used on: button hover/pressed states, * carousel nav hover, lightbox close hover, order CTA button hover. */ --p-accent-hover: #9a3920; /* Pale tint of accent. Used on: promo/coupon card background, * selected shipping option background, active nav item background, * form input focus ring. */ --p-accent-soft: #f3dcd1; /* Text color for use ON accent-colored containers. Used on: primary * and accent buttons, product badge (accent variant), product promo * strip, carousel nav arrows, lightbox nav arrows, active tracker dot, * payment confirm CTA. Must contrast against --p-accent itself. * For text on --p-accent-soft backgrounds, use --p-accent instead. */ --p-accent-ink: #ffffff; /* === Surfaces ================================================ * Four surface levels from base page to raised card. * ----------------------------------------------------------- */ /* Page / body background. Used on: , navbar, filter bar, * mobile drawer, search overlay. Also used to "bleed" tracker * step dots into the page (the ring around each dot). */ --p-bg: #faf7f2; /* Recessed / tinted surface, one step darker than bg. * Used on: product image containers, disabled filter chips, * icon button hover, order info sections, driver card, waybill badge. */ --p-bg-soft: #f1ebe1; /* Raised card / panel background. Typically white or near-white. * Used on: order cards, cart summary, quantity stepper, dropdown menus, * mega menu, all form input fields, payment option rows. */ --p-bg-card: #ffffff; /* High-contrast inverse surface. Used on: footer background, * search overlay backdrop, filter sheet confirm button. */ --p-bg-inverse: #1a1714; /* === Text ==================================================== * Three levels of text emphasis — use in descending order of * importance so the visual hierarchy reads at a glance. * ----------------------------------------------------------- */ /* Primary body text. Used on: default, chip labels, * product names, section headings (non-accent). */ --p-text: #1a1714; /* Secondary / supporting text. Used on: captions, meta info, * cart item details, price subtitles, filter labels, form hints, * breadcrumb separators, tracking timestamps. */ --p-text-muted: #6b6259; /* Tertiary / placeholder text. Used on: search placeholder, * free-shipping hint, unvisited tracker step labels, * original/strikethrough price, security-line copy, empty-state text. */ --p-text-light: #a39a8f; /* === Borders ================================================= * Two border weights — use strong only where emphasis is needed. * ----------------------------------------------------------- */ /* Default divider / outline. Used on: cart item row dividers, * card edges, filter chip borders, dropdown borders, * section separators, tracker event dot ring, dashed timeline lines. */ --p-border: #e5ddd0; /* Emphasized outline. Used on: quantity stepper border, * form input default border, radio input ring, copy-action button, * thumbnail selected-state ring, product sort/filter inputs. */ --p-border-strong: #c9bfae; /* === Status ================================================== * Semantic color pairs — each status has a full-strength color * for text/icons and a soft tint for backgrounds. * ----------------------------------------------------------- */ /* Positive / confirmation. Text color for: success alert text, * free-shipping indicator, order-confirmed banner text. */ --p-success: #4a7c3a; /* Pale success tint. Background for: success alert, order-success banner, * "new" product badge. */ --p-success-soft: #e5ecd9; /* Destructive / failure. Text color for: error alert text, * remove-item button (hover), cancellation banner text. */ --p-error: #b03a2e; /* Pale error tint. Background for: error alert, remove-item button (hover), * cancellation banner background. */ --p-error-soft: #f5dcd4; /* Caution / attention. Text color for: warning alert text, * low-stock notices. */ --p-warning: #c98823; /* Pale warning tint. Background for: warning alert background. */ --p-warning-soft: #f6ead0; /* === Typography ============================================== * Four font roles — assign different families per palette to * shift the brand personality without touching any component. * ----------------------------------------------------------- */ /* Headings and hero text ONLY — never amounts, codes, or badges. * All numeric displays (prices, totals) belong to --p-font-number. */ --p-font-heading: Inter, sans-serif; /* All body copy, UI labels, navigation, form fields. */ --p-font-body: Inter, sans-serif; /* Prices, quantities, numeric data — use a font with * clear digit distinction and tabular figures. */ --p-font-number: Inter, sans-serif; /* Order numbers, tracking IDs, VA/QRIS codes, timestamps. */ --p-font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* OpenType character variants applied to body text. Inter ships with * alternate glyphs for 1, 4, 6, 9 and similar that read better at small * sizes. Set to `normal` when using a non-Inter body font so these * feature tags don't carry over to an unrelated typeface. */ --p-font-body-features: 'cv02', 'cv03', 'cv04', 'cv11'; }