CSS to Tailwind Token Mapping

function toHsl(rgb) {
  const [r, g, b] = rgb.match(/\d+/g).map(Number).map(n => n / 255);
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) { h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
}

Is it the most prominent interactive colour (CTA button bg, main link)?
  YES → --primary
  NO ↓

Is it used on a second type of button or a less prominent interactive element?
  YES → --secondary
  NO ↓

Is it used for hover states, tag backgrounds, or inline highlights only?
  YES → --accent
  NO ↓

Is it a subtle background (sidebar, card surface, input field bg)?
  YES → --muted  (text on it → --muted-foreground)
  NO ↓

Is it used on borders, dividers, or form input outlines?
  YES → --border
  NO ↓

Is it the page-level background?
  YES → --background  (text on it → --foreground)
  NO → define a custom token (e.g. --surface, --panel, --hero-bg)

@theme inline {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

@theme inline {
  --text-display: 3.5rem;
}

@theme inline {
  --spacing-section: 5rem; /* 80px */
}

:root {
  --radius: 0.5rem; /* matches the site's rounded-lg */
}
@theme inline {
  --radius-default: var(--radius);
}

@theme inline {
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

@import "tailwindcss";

/* ── Semantic tokens ── */
:root {
  /* Colours (fill from extraction) */
  --background:           hsl(0 0% 100%);
  --foreground:           hsl(221 39% 11%);
  --primary:              hsl(174 90% 31%);
  --primary-foreground:   hsl(0 0% 100%);
  --secondary:            hsl(210 40% 96%);
  --secondary-foreground: hsl(222 47% 11%);
  --muted:                hsl(210 40% 96%);
  --muted-foreground:     hsl(215 16% 47%);
  --accent:               hsl(210 40% 96%);
  --accent-foreground:    hsl(222 47% 11%);
  --destructive:          hsl(0 84% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border:               hsl(214 32% 91%);
  --ring:                 hsl(174 90% 31%);
  --card:                 hsl(0 0% 100%);
  --card-foreground:      hsl(221 39% 11%);

  /* Shape */
  --radius: 0.5rem;
}

/* ── Map to Tailwind utilities ── */
@theme inline {
  --color-background:           var(--background);
  --color-foreground:           var(--foreground);
  --color-primary:              var(--primary);
  --color-primary-foreground:   var(--primary-foreground);
  --color-secondary:            var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted:                var(--muted);
  --color-muted-foreground:     var(--muted-foreground);
  --color-accent:               var(--accent);
  --color-accent-foreground:    var(--accent-foreground);
  --color-destructive:          var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border:               var(--border);
  --color-ring:                 var(--ring);
  --color-card:                 var(--card);
  --color-card-foreground:      var(--card-foreground);

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ── Base styles ── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
}