/* ==========================================================================
   Tradehouse design tokens
   Monochrome base. Each corner of the business owns one colour, applied via
   [data-svc="web|seo|ads|brand"] so any component can pick it up.
   ========================================================================== */

:root {
  /* Monochrome */
  --ink: #0b0b0c;
  --ink-2: #3a3b3f;
  --ink-3: #6b6d73;
  --line: #dcdee2;
  --bg: #f3f4f6;          /* cool neutral page ground */
  --surface: #ffffff;
  --surface-2: #e8e9ec;   /* "slightly off" resting state for hover tiles */
  --dark: #0b0b0c;
  --dark-2: #17181a;
  --dark-3: #232427;
  --on-dark: #f3f4f6;
  --on-dark-2: #a4a6ac;

  /* Service colours */
  --web: #c6ff00;    --web-2: #8cf000;   --web-ink: #0b0b0c;   /* Volt */
  --seo: #0057ff;    --seo-2: #3b82ff;   --seo-ink: #ffffff;   /* Electric blue */
  --ads: #ff4d00;    --ads-2: #ff7a1a;   --ads-ink: #0b0b0c;   /* Hot orange */
  --brand: #7a00ff;  --brand-2: #a03cff; --brand-ink: #ffffff; /* Ultraviolet */

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Shape: sharp-ish everywhere; the single pill is the header CTA */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 128px);
  --header-h: 92px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-svc="web"]   { --svc: var(--web);   --svc-2: var(--web-2);   --svc-ink: var(--web-ink); }
[data-svc="seo"]   { --svc: var(--seo);   --svc-2: var(--seo-2);   --svc-ink: var(--seo-ink); }
[data-svc="ads"]   { --svc: var(--ads);   --svc-2: var(--ads-2);   --svc-ink: var(--ads-ink); }
[data-svc="brand"] { --svc: var(--brand); --svc-2: var(--brand-2); --svc-ink: var(--brand-ink); }