/* Karofi PH — colour system.
   --k-cyan-500 (#00A7E2) is sampled pixel-exact from the supplied logo and is the
   single non-negotiable brand value. Every other ramp is built to harmonise with it.
   Tier accents (gold / platinum) and the sale red are INFERRED from karofi.ph
   merchandising, not from a written spec — see readme.md "Open questions". */

:root{
  /* ---- Karofi cyan: the brand ---- */
  --k-cyan-50:#e8f7fd;
  --k-cyan-100:#c9edfa;
  --k-cyan-200:#93dbf5;
  --k-cyan-300:#5dc8f0;
  --k-cyan-400:#29b5ea;
  --k-cyan-500:#00a7e2;
  --k-cyan-600:#0089bc;
  --k-cyan-700:#006b94;
  --k-cyan-800:#004e6c;
  --k-cyan-900:#003448;

  /* ---- Deep water ink: headlines, dark sections, footers ---- */
  --k-ink-500:#2b5a74;
  --k-ink-600:#16465f;
  --k-ink-700:#0d3550;
  --k-ink-800:#06263a;
  --k-ink-900:#041a28;

  /* ---- Neutrals: cool-leaning greys, never pure black ---- */
  --k-white:#ffffff;
  --k-grey-50:#f7f9fa;
  --k-grey-100:#eef2f4;
  --k-grey-200:#dfe5e9;
  --k-grey-300:#c6cfd5;
  --k-grey-400:#9aa7b0;
  --k-grey-500:#6e7d88;
  --k-grey-600:#4e5c66;
  --k-grey-700:#35414a;
  --k-grey-800:#212b32;
  --k-grey-900:#10171c;

  /* ---- Semantic status ---- */
  --k-green-500:#0fa958;   /* eco / in-stock / filter healthy */
  --k-green-50:#e6f8ee;
  --k-amber-500:#f5a524;   /* filter due / low stock */
  --k-amber-50:#fef4e2;
  --k-red-500:#e1251b;     /* sale price, replace filter, errors */
  --k-red-50:#fdeceb;

  /* ---- Premium tier accents (INFERRED) ---- */
  --k-gold-500:#c9a86a;    /* DIAMOND series */
  --k-gold-100:#f4ebd9;
  --k-platinum-500:#8a9299;/* PLATINUM series */
  --k-platinum-100:#e9ecee;

  /* ================= SEMANTIC ALIASES ================= */
  /* Text */
  --text-heading:var(--k-ink-800);
  --text-body:var(--k-grey-700);
  --text-muted:var(--k-grey-500);
  --text-subtle:var(--k-grey-400);
  --text-brand:var(--k-cyan-600);
  --text-on-brand:var(--k-white);
  --text-on-dark:var(--k-white);
  --text-on-dark-muted:rgb(255 255 255 / .72);
  --text-price:var(--k-ink-800);
  --text-price-sale:var(--k-red-500);
  --text-link:var(--k-cyan-600);
  --text-link-hover:var(--k-cyan-700);

  /* Surfaces */
  --surface-page:var(--k-white);
  --surface-subtle:var(--k-grey-50);
  --surface-card:var(--k-white);
  --surface-sunken:var(--k-grey-100);
  --surface-brand:var(--k-cyan-500);
  --surface-brand-soft:var(--k-cyan-50);
  --surface-dark:var(--k-ink-800);
  --surface-overlay:rgb(6 38 58 / .58);

  /* Borders */
  --border-subtle:var(--k-grey-200);
  --border-default:var(--k-grey-300);
  --border-strong:var(--k-grey-400);
  --border-brand:var(--k-cyan-500);
  --border-on-dark:rgb(255 255 255 / .16);

  /* Interactive — primary */
  --action-primary-bg:var(--k-cyan-500);
  --action-primary-bg-hover:var(--k-cyan-600);
  --action-primary-bg-active:var(--k-cyan-700);
  --action-primary-fg:var(--k-white);

  /* Interactive — secondary / outline */
  --action-secondary-bg:transparent;
  --action-secondary-bg-hover:var(--k-cyan-50);
  --action-secondary-fg:var(--k-cyan-600);
  --action-secondary-border:var(--k-cyan-500);

  /* Interactive — dark (on light imagery) */
  --action-dark-bg:var(--k-ink-800);
  --action-dark-bg-hover:var(--k-ink-700);
  --action-dark-fg:var(--k-white);

  --action-disabled-bg:var(--k-grey-200);
  --action-disabled-fg:var(--k-grey-400);

  --focus-ring:var(--k-cyan-400);

  /* Status */
  --status-success-fg:var(--k-green-500);
  --status-success-bg:var(--k-green-50);
  --status-warning-fg:var(--k-amber-500);
  --status-warning-bg:var(--k-amber-50);
  --status-danger-fg:var(--k-red-500);
  --status-danger-bg:var(--k-red-50);
  --status-info-fg:var(--k-cyan-600);
  --status-info-bg:var(--k-cyan-50);

  /* Water gradients — the brand's one sanctioned gradient family */
  --gradient-water:linear-gradient(160deg,var(--k-cyan-400) 0%,var(--k-cyan-600) 100%); /* @kind color */
  --gradient-water-soft:linear-gradient(180deg,var(--k-cyan-50) 0%,var(--k-white) 100%); /* @kind color */
  --gradient-deep:linear-gradient(160deg,var(--k-ink-700) 0%,var(--k-ink-900) 100%); /* @kind color */
  /* Legibility scrim for text over photography */
  --gradient-scrim:linear-gradient(180deg,rgb(4 26 40 / 0) 0%,rgb(4 26 40 / .75) 100%); /* @kind color */
}