/* ═══════════════════════════════════════════════════════════════════════════
 * Karigar — colour.
 *
 * BRAND PALETTE (client-supplied, canonical — supersedes the gold ramp that was
 * extracted from Karigar.fig; see readme.md > "Colour" for the change note):
 *
 *   #F3ECE6  porcelain   lightest warm surface
 *   #D6C4B6  clay        mid warm neutral
 *   #B9A08C  clay deep   the accent — selection, CTAs, brand marks
 *   #303030  ink         near-black, all primary type and dark surfaces
 *
 * Everything else is a DERIVED tint or shade of those four, kept in the same
 * warm hue family. Derived steps are marked. Semantic status hues are the only
 * values outside the family, and they are desaturated to sit beside it.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── The four brand colours ─────────────────────────────── */
  --k-porcelain:#F3ECE6;      /* BRAND */
  --k-clay:#D6C4B6;           /* BRAND */
  --k-clay-deep:#B9A08C;      /* BRAND */
  --k-ink:#303030;            /* BRAND */

  /* ── Porcelain ramp (derived) ───────────────────────────── */
  --k-porcelain-050:#FBF8F5;
  --k-porcelain-100:#F3ECE6;  /* = --k-porcelain */
  --k-porcelain-200:#EAE0D8;
  --k-porcelain-300:#E1D3C8;

  /* ── Clay ramp (derived around the two brand clays) ─────── */
  --k-clay-200:#D6C4B6;       /* = --k-clay */
  --k-clay-300:#C8B2A1;
  --k-clay-400:#B9A08C;       /* = --k-clay-deep */
  --k-clay-500:#A98B74;
  --k-clay-600:#96795F;       /* hover */
  --k-clay-700:#7D6350;       /* press, accent type */
  --k-clay-800:#634E3F;

  /* ── Ink ramp (derived around #303030) ──────────────────── */
  --k-ink-900:#1E1C1B;
  --k-ink-800:#303030;        /* = --k-ink */
  --k-ink-700:#3C3937;
  --k-ink-600:#4A4644;
  --k-ink-500:#5F5854;        /* secondary type */
  --k-ink-400:#6E6763;
  --k-ink-300:#928A84;        /* placeholder */
  --k-ink-200:#B8AFA8;
  --k-white:#FFFFFF;

  /* ── Semantic status (desaturated to sit in the family) ─── */
  --k-positive:#4E7A63;
  --k-positive-bg:#E3EDE6;
  --k-danger:#9C4A42;
  --k-danger-muted:#B4796F;
  --k-slate:#3E4A47;          /* selected ink block — cart line, shipping row */
  --k-info:#5B6E8C;

  /* ── Aliases so existing component code keeps resolving ──
   * The design system was first built against the .fig gold ramp. These names
   * are retained and now point into the clay ramp; prefer the --k-clay-*,
   * --k-porcelain-* and --k-ink-* names in new work. */
  --k-gold:var(--k-clay-400);
  --k-gold-050:var(--k-porcelain-300);
  --k-gold-100:var(--k-clay-200);
  --k-gold-200:var(--k-clay-300);
  --k-gold-300:var(--k-clay-300);
  --k-gold-400:var(--k-clay-400);
  --k-gold-500:var(--k-clay-500);
  --k-gold-600:var(--k-clay-500);
  --k-gold-700:var(--k-clay-600);
  --k-gold-900:var(--k-clay-800);
  --k-ink-brown:var(--k-ink-800);
  --k-cream:var(--k-porcelain-100);
  --k-cream-light:var(--k-porcelain-050);
  --k-cream-deep:var(--k-porcelain-200);
  --k-cream-field:var(--k-porcelain-100);
  --k-cream-tile:var(--k-porcelain-050);
  --k-hairline:var(--k-porcelain-300);
  --k-hairline-strong:var(--k-clay-300);
  --k-hairline-warm:var(--k-porcelain-300);
  --k-taupe:var(--k-ink-500);
  --k-taupe-mid:var(--k-ink-400);
  --k-taupe-light:var(--k-ink-300);
  --k-surface-app:var(--k-porcelain-100);
  --k-surface-raised:var(--k-white);
  --k-surface-1:var(--k-porcelain-050);
  --k-surface-2:var(--k-porcelain-200);
  --k-surface-3:var(--k-porcelain-300);
  --k-surface-4:var(--k-porcelain-200);
  --k-slate-green:var(--k-slate);
  --k-key-return:#C6D2E0;
  --k-black:var(--k-ink-900);

  /* ── Semantic aliases — use these in product code ───────── */
  --text-primary:var(--k-ink-800);
  --text-strong:var(--k-ink-900);
  --text-secondary:var(--k-ink-500);
  --text-muted:var(--k-ink-400);
  --text-placeholder:var(--k-ink-300);
  --text-inverse:var(--k-white);
  --text-accent:var(--k-clay-700);
  --text-warm:var(--k-ink-500);
  --text-warm-muted:var(--k-ink-400);
  --text-ink:var(--k-ink-800);

  --surface-canvas:var(--k-porcelain-100);
  --surface-canvas-warm:var(--k-porcelain-100);
  --surface-card:var(--k-white);
  --surface-card-alt:var(--k-porcelain-050);
  --surface-card-warm:rgba(255,255,255,0.88);
  --surface-tile:var(--k-porcelain-200);
  --surface-chip:var(--k-porcelain-300);
  --surface-sand:var(--k-clay-200);
  --surface-ink:var(--k-ink-800);

  --border-hairline:var(--k-porcelain-300);
  --border-hairline-warm:var(--k-porcelain-300);
  --border-selected:var(--k-ink-800);

  /* Clay fills always carry INK type (5.3:1); ink fills carry white (12.6:1). */
  --action-primary:var(--k-clay-400);
  --on-action-primary:var(--k-ink-800);
  --action-primary-warm:var(--k-clay-400);
  --action-secondary:var(--k-ink-800);
  --on-action-secondary:var(--k-white);
  --action-destructive:var(--k-danger);
  --on-action-destructive:var(--k-white);
  --action-quiet:var(--k-porcelain-200);
  --on-action-quiet:var(--k-ink-800);
  --action-on-primary:var(--k-ink-800); /* deprecated name, kept resolving */

  --state-positive:var(--k-positive);
  --state-positive-bg:var(--k-positive-bg);
}