/* Talaan — colour tokens, v4 "Mono Print" (Oct 2026). Ink + paper do the work; vermilion is the one brand red; indigo, mustard, cobalt are print accents. Base palette, then semantic (light), then [data-theme="dark"]. */
:root{
/* Vermilion — the brand. 500 is the brand colour. White text on 500 is 4.0:1, so use it at button size and up; for red text on paper use 600+. */
--vermilion-50:#FDF0EC;--vermilion-100:#F9DDD4;--vermilion-200:#F2B9A8;--vermilion-300:#E98D74;--vermilion-400:#DE6447;--vermilion-500:#D2432B;--vermilion-600:#B53A2B;--vermilion-700:#932F24;--vermilion-800:#6F241C;--vermilion-900:#4A1813;
/* Ink — warm neutrals from paper to print-black. 900 is the brand ink. */
--white:#FFFFFF;--ink-25:#FBF7F0;--ink-50:#F6EFE4;--ink-100:#F0E4D5;--ink-200:#E6DCCD;--ink-300:#D4C7B5;--ink-400:#A89E92;--ink-500:#7A7066;--ink-600:#5E554B;--ink-700:#3E3832;--ink-800:#2A2622;--ink-900:#1E1B18;--ink-950:#141210;
/* Paper — named aliases for the two page tones */
--paper:#FBF7F0;--bone:#F0E4D5;--cream-50:var(--paper);--cream-100:var(--bone);--cream-200:var(--ink-200);
/* Print accents — one job each */
--indigo-100:#DCE4E6;--indigo-400:#24506A;--indigo-500:#1B3E53;--indigo-700:#122A38;
--mustard-100:#FBE7BC;--mustard-400:#F3B12A;--mustard-800:#6B4A0C;
--cobalt-100:#DDE3F3;--cobalt-500:#24479A;
--pine-100:#DDE8DC;--pine-500:#2E6B45;--pine-700:#22573A;
--oxblood-100:#F3DADB;--oxblood-600:#7E1F24;--oxblood-700:#651519;
/* Marketplace inks (tags, legend squares) for the app. Marketing pages may show the marketplaces' own app icons instead (assets/marketplaces/, official colours) — see readme ICONOGRAPHY. */
--store-shopee:var(--mustard-400);--store-shopee-fg:var(--ink-900);
--store-lazada:var(--cobalt-500);--store-lazada-fg:#FFFFFF;
--store-tiktok:var(--ink-900);--store-tiktok-fg:#FFFFFF;

/* Status — light. Red family is oxblood so it never reads as brand vermilion. */
--status-accepted-fg:#22573A;--status-accepted-bg:#DDE8DC;--status-accepted-border:#A9C7AE;--status-accepted-solid:#2E6B45;
--status-pending-fg:#7A4E0E;--status-pending-bg:#F8E6C2;--status-pending-border:#E6C47C;--status-pending-solid:#B07A14;
--status-rejected-fg:#7E1F24;--status-rejected-bg:#F3DADB;--status-rejected-border:#DDA4A7;--status-rejected-solid:#8E262C;
--status-overdue-fg:#6A161B;--status-overdue-bg:#EFCFD1;--status-overdue-border:#D69599;--status-overdue-solid:#7E1F24;--status-overdue-on-solid:#FFFFFF;
--status-expired-fg:#5E554B;--status-expired-bg:#EFE6DA;--status-expired-border:#D4C7B5;--status-expired-solid:#7A7066;
--status-info-fg:#1B3E53;--status-info-bg:#DCE4E6;--status-info-border:#A9BDC6;--status-info-solid:#24506A;

/* Semantic — light */
--surface-page:var(--paper);--surface-card:var(--white);--surface-sunken:var(--bone);--surface-hover:var(--ink-50);--surface-selected:var(--bone);--surface-inverse:var(--ink-900);--surface-brand:var(--vermilion-500);--surface-marketing:var(--bone);--surface-panel:var(--indigo-500);--surface-print:var(--bone);--surface-overlay:rgba(20,18,16,.5);
--border-subtle:#EFE6DA;--border-default:var(--ink-200);--border-strong:var(--ink-300);--border-focus:var(--ink-900);--border-heavy:var(--ink-900);
--text-primary:var(--ink-900);--text-secondary:var(--ink-600);--text-tertiary:var(--ink-500);--text-disabled:var(--ink-400);--text-on-brand:#FFFFFF;--text-inverse:var(--bone);--text-on-panel:#FFFFFF;--text-on-panel-muted:#9FB6C1;--text-link:var(--ink-900);--text-link-hover:var(--vermilion-600);--text-accent:var(--vermilion-600);
--brand-primary:var(--vermilion-500);--brand-primary-hover:var(--vermilion-600);--brand-primary-active:var(--vermilion-700);--brand-primary-subtle:var(--vermilion-50);--brand-primary-border:var(--vermilion-200);
--brand-secondary:var(--indigo-500);--brand-secondary-subtle:var(--indigo-100);--brand-accent:var(--mustard-400);
/* Checked controls, tab underline, selected-row bar */
--control-on-bg:var(--ink-900);--control-on-fg:var(--white);--control-switch-on:var(--status-accepted-solid);--marker:var(--vermilion-500);
--danger:var(--oxblood-600);--danger-hover:var(--oxblood-700);--danger-subtle:var(--oxblood-100);
--focus-ring:0 0 0 3px rgba(210,67,43,.32);
}
[data-theme="dark"]{
--surface-page:var(--ink-950);--surface-card:#1C1916;--surface-sunken:#26221D;--surface-hover:#221E1A;--surface-selected:#2E2721;--surface-inverse:var(--bone);--surface-brand:var(--vermilion-500);--surface-marketing:var(--ink-950);--surface-panel:#17384B;--surface-print:var(--bone);--surface-overlay:rgba(0,0,0,.64);
--border-subtle:#2A2520;--border-default:#3A332B;--border-strong:#4E453B;--border-focus:var(--bone);--border-heavy:var(--bone);
--text-primary:var(--bone);--text-secondary:#BFB3A2;--text-tertiary:#94897B;--text-disabled:#625A50;--text-on-brand:#FFFFFF;--text-inverse:var(--ink-900);--text-on-panel:#FFFFFF;--text-on-panel-muted:#9FB6C1;--text-link:var(--bone);--text-link-hover:#F29A82;--text-accent:#F29A82;
--brand-primary:var(--vermilion-500);--brand-primary-hover:var(--vermilion-400);--brand-primary-active:var(--vermilion-300);--brand-primary-subtle:#3A1E17;--brand-primary-border:var(--vermilion-800);
--brand-secondary:#9FB6C1;--brand-secondary-subtle:#17384B;
--control-on-bg:var(--bone);--control-on-fg:var(--ink-900);--control-switch-on:#3F8A5C;--marker:var(--vermilion-400);
--danger:#E0706F;--danger-hover:#EA8A88;--danger-subtle:#3A1416;
--focus-ring:0 0 0 3px rgba(222,100,71,.45);
--store-lazada:#3A5DB5;--store-tiktok:var(--bone);--store-tiktok-fg:var(--ink-900);
--status-accepted-fg:#8CCB9F;--status-accepted-bg:#13261A;--status-accepted-border:#24452F;--status-accepted-solid:#3F8A5C;
--status-pending-fg:#F3C063;--status-pending-bg:#2E2208;--status-pending-border:#5E4510;--status-pending-solid:#D9A13A;
--status-rejected-fg:#F0A3A4;--status-rejected-bg:#3A1416;--status-rejected-border:#6A2529;--status-rejected-solid:#C2474D;
--status-overdue-fg:#FFC2C2;--status-overdue-bg:#4A1216;--status-overdue-border:#7D2227;--status-overdue-solid:#C2474D;--status-overdue-on-solid:#FFFFFF;
--status-expired-fg:#BFB3A2;--status-expired-bg:#26221D;--status-expired-border:#3A332B;--status-expired-solid:#7A7066;
--status-info-fg:#9FB6C1;--status-info-bg:#13283A;--status-info-border:#24445C;--status-info-solid:#4D7E9A;
}