/* Base palette — sampled from the InkSite ink-drop logo (assets/logo-inksite-advertising.png).
   Brand hues: cyan #04a0ef, magenta #ff2998, yellow #fdd94f, ink black #0a0a0a.
   Contrast ratios in comments are vs #ffffff unless stated. WCAG 2.2 AA is the floor for
   every semantic text/action token below. */
:root{
  /* Cyan */
  --cyan-50:#eef8ff; --cyan-100:#d7eefd; --cyan-200:#a9ddfb; --cyan-300:#5bc2f6;
  --cyan-400:#04a0ef;  /* brand cyan — 2.88:1, graphics only */
  --cyan-500:#0d8ed6;  /* 3.59:1 — large text / UI edges */
  --cyan-600:#0f7cbd;  /* 4.53:1 — AA text, button fills */
  --cyan-700:#0a6ca6;  /* 5.66:1 — links */
  --cyan-800:#075a8c;  /* 7.37:1 */

  /* Magenta */
  --magenta-50:#fff0f7; --magenta-100:#ffd9ec; --magenta-200:#ffabd2; --magenta-300:#ff6bb4;
  --magenta-400:#ff2998; /* brand magenta — 3.49:1, graphics + large display only */
  --magenta-500:#e21b81; /* 4.46:1 — large text */
  --magenta-600:#c4126e; /* 5.74:1 — primary action fill */
  --magenta-700:#a80d5e; /* 7.28:1 — hover */
  --magenta-800:#8c0a4e; /* 9.26:1 — active */

  /* Yellow — the logo's highlight drop. Never white-on-yellow; pair with ink. */
  --yellow-50:#fffaeb; --yellow-100:#fff2c9; --yellow-200:#ffe694;
  --yellow-300:#fdd94f; /* brand yellow — 1.38:1 on white; 14.3:1 with ink text on top */
  --yellow-400:#e8bd21;
  --yellow-500:#b8900d; /* 2.99:1 — icon/graphic on white */
  --yellow-600:#8f6d00; /* 4.82:1 — the only yellow safe for text on white */

  /* Slate neutrals — the theme's real greys (Tailwind-family), read from the live CSS:
     #4A5565 nav/body text, #E9E9E9 borders, #D1D5DC header icons, #F9FAFB nav gradient stop, #0F0F0F menu ink */
  --slate-50:#f9fafb; --slate-100:#f3f4f6; --slate-200:#e9e9e9; --slate-300:#d1d5dc;
  --slate-400:#9aa1ac; /* 3.2:1 — non-text only */
  --slate-500:#6b7280; /* 4.8:1 */
  --slate-600:#4a5565; /* 7.3:1 — the site's body + nav colour */
  --slate-900:#0f0f0f; /* 19.4:1 */

  /* UI pink — the announcement band and promo accents (#FF6196 in the theme).
     Distinct from the logo's ink magenta. */
  --pink-50:#fff1f6; --pink-200:#ffc3d7; --pink-300:#ff94b6;
  --pink-400:#ff6196; /* theme pink — 2.8:1, band background only */
  --pink-500:#e23a76; /* 4.1:1 — large text */
  --pink-600:#c42159; /* 5.9:1 — text/fills */
  --pink-700:#a31646; /* 7.7:1 */

  /* Product label colours, verbatim from the theme */
  --label-orange:#ff8103;
  --label-blue:#13acf5;

  /* Ink neutrals */
  --ink-900:#0a0a0a; --ink-800:#1c1c1e; --ink-700:#3a3a3e; --ink-600:#5c5c62;
  --ink-500:#8a8a91; --ink-400:#b4b4ba; --ink-300:#c9c9ce; --ink-200:#e7e7ea;
  --ink-100:#f5f6f8; --ink-000:#ffffff;

  /* Surfaces */
  --surface-page:var(--ink-000);
  --surface-subtle:var(--slate-50);
  --surface-card:var(--ink-000);
  --surface-inverse:#111113;      /* matches assets/backgrounds/trust-section-dark.png */
  --surface-tint-cyan:var(--cyan-50);
  --surface-tint-magenta:var(--magenta-50);
  --surface-tint-yellow:var(--yellow-50);

  /* Text */
  --text-strong:var(--ink-900);        /* 19.8:1 */
  --text-body:var(--slate-600);        /* 7.3:1 — #4A5565, the theme value */
  --text-muted:var(--slate-500);       /* 4.8:1  — smallest safe grey on white */
  --text-disabled:var(--ink-500);      /* 3.4:1  — non-text UI only */
  --text-link:var(--cyan-700);         /* 5.7:1 */
  --text-link-hover:var(--cyan-800);   /* 7.4:1 */
  --text-accent:var(--magenta-600);    /* 5.7:1 — inline emphasis */
  --text-on-fill:var(--ink-000);
  --text-inverse:var(--ink-000);       /* on --surface-inverse: 18.5:1 */
  --text-inverse-muted:var(--ink-300); /* 12:1 on inverse */
  --text-link-inverse:var(--cyan-300); /* 8.9:1 on inverse */

  /* Actions — primary = Get a Quotation, secondary = Message us on Facebook */
  --action-primary-bg:var(--magenta-600);
  --action-primary-bg-hover:var(--magenta-700);
  --action-primary-bg-active:var(--magenta-800);
  --action-primary-fg:var(--ink-000);
  --action-secondary-bg:var(--cyan-600);
  --action-secondary-bg-hover:var(--cyan-700);
  --action-secondary-bg-active:var(--cyan-800);
  --action-secondary-fg:var(--ink-000);
  --action-quiet-fg:var(--ink-900);
  --action-quiet-bg-hover:var(--ink-100);
  --action-disabled-bg:var(--ink-200);
  --action-disabled-fg:var(--ink-600);  /* 2.8:1 on the grey fill — disabled is exempt, but stays legible */

  /* Borders + focus */
  --border-subtle:var(--slate-200);
  --border-default:var(--slate-300);
  --border-strong:var(--slate-400);     /* 3.2:1 — meets AA non-text contrast */
  --border-inverse:rgba(255,255,255,.16);
  --focus-ring:var(--cyan-700);
  --focus-ring-offset:var(--ink-000);

  /* Status */
  --status-info-fg:var(--cyan-700);     --status-info-bg:var(--cyan-50);
  --status-success-fg:#12694a;          --status-success-bg:#e8f6ef;
  --status-warning-fg:var(--yellow-600);--status-warning-bg:var(--yellow-50);
  --status-error-fg:#b3261e;            --status-error-bg:#fdecea;

  /* Announcement / promo band — theme uses white on #FF6196 (2.8:1, fails AA),
     so this system pairs the band with ink text instead. */
  --promo-bg:var(--pink-400);
  --promo-fg:var(--slate-900);          /* 6.7:1 on the band */
  --gradient-nav:linear-gradient(230deg,#ffffff 0%,#f9fafb 100%); /* @kind other */

  /* Graphic accents — decoration, illustration, ink blooms. Not for text. */
  --accent-cyan:var(--cyan-400);
  --accent-magenta:var(--magenta-400);
  --accent-yellow:var(--yellow-300);
  --bloom-cyan:radial-gradient(60% 60% at 80% 10%,rgba(4,160,239,.16),transparent 70%); /* @kind other */
  --bloom-magenta:radial-gradient(55% 55% at 8% 92%,rgba(255,41,152,.14),transparent 70%); /* @kind other */
}