:root{
/* ---- Base palette (brand-supplied) ---- */
--pen-ink:#272733;        /* near-black graphite — headlines, body, wordmark */
--pen-blue:#60a4eb;       /* signal blue — rules, chevrons, highlighter, duotone */
--pen-orange:#fd792e;     /* work orange — banners, "IN NET", emphasis fills */
--pen-paper:#f2f2f2;      /* newsprint grey — page and card fields */
--pen-white:#ffffff;

/* ---- Ink ramp (tints of --pen-ink, oklch-derived) ---- */
--ink-900:#272733;
--ink-700:oklch(0.42 0.018 275);
--ink-500:oklch(0.56 0.015 275);
--ink-300:oklch(0.74 0.010 275);
--ink-100:oklch(0.90 0.005 275);

/* ---- Blue ramp ---- */
--blue-700:oklch(0.52 0.145 254);
--blue-600:oklch(0.62 0.135 254);
--blue-500:#60a4eb;
--blue-300:oklch(0.82 0.070 254);   /* highlighter wash */
--blue-100:oklch(0.94 0.028 254);

/* ---- Orange ramp ---- */
--orange-700:oklch(0.56 0.170 44);
--orange-600:oklch(0.65 0.190 44);
--orange-500:#fd792e;
--orange-300:oklch(0.83 0.100 51);
--orange-100:oklch(0.95 0.035 51);

/* ---- Semantic: surfaces ---- */
--surface-page:var(--pen-white);
--surface-sunken:var(--pen-paper);
--surface-card:var(--pen-white);
--surface-card-quiet:var(--pen-paper);
--surface-inverse:var(--pen-ink);
--surface-brand:var(--pen-orange);
--surface-accent:var(--pen-blue);
--surface-accent-wash:var(--blue-100);
--surface-highlight:var(--blue-300);   /* the marker-pen wash behind prices */

/* ---- Semantic: text ---- */
--text-body:var(--ink-900);
--text-muted:var(--ink-500);
--text-faint:var(--ink-300);
--text-display:var(--pen-ink);
--text-on-brand:var(--pen-white);
--text-on-accent:var(--pen-ink);
--text-on-inverse:var(--pen-white);
--text-price:var(--ink-900);
--text-code:var(--ink-500);            /* COD.101 product codes */
--text-link:var(--blue-700);
--text-link-hover:var(--orange-600);

/* ---- Semantic: lines ---- */
--line-hairline:var(--ink-100);
--line-rule:var(--pen-blue);           /* the blue double rules */
--line-card:var(--ink-300);
--line-strong:var(--pen-ink);

/* ---- Semantic: status ---- */
--status-ok:oklch(0.60 0.140 150);
--status-warn:var(--orange-500);
--status-danger:oklch(0.55 0.200 25);
--status-info:var(--blue-600);
--status-whatsapp:#25d366;             /* the channel the brand actually sells on */

/* ---- Illustration palette ----
   Baked into the three product spot illustrations in assets/icons/.
   Warmer than the UI palette on purpose — do not use these for UI. */
--illus-ink:#393438;
--illus-light:#e5ab48;   /* the ochre light rays */
--illus-clamp:#942524;   /* the crocodile clip */
}