/* ============================================
   tools.richardbrunt.co.uk — Design Tokens
   ============================================ */

@import url('/shared/fonts/open-sans.css');

:root {
  /* --- Orange palette (primary) --- */
  --col-orange-1: hsl(38, 86%, 97%);
  --col-orange-2: hsl(38, 86%, 93%);
  --col-orange-3: hsl(38, 86%, 85%);
  --col-orange-4: hsl(38, 86%, 51%);
  --col-orange-5: hsl(38, 86%, 16%);

  /* --- Teal palette (accent) --- */
  --col-teal-1: hsl(188, 60%, 97%);
  --col-teal-2: hsl(188, 60%, 90%);
  --col-teal-3: hsl(188, 60%, 75%);
  --col-teal-4: hsl(188, 60%, 40%);
  --col-teal-5: hsl(188, 60%, 16%);

  /* --- Warm Neutral palette --- */
  --col-neutral-1: hsl(38, 10%, 97%);
  --col-neutral-2: hsl(38, 10%, 90%);
  --col-neutral-3: hsl(38, 10%, 70%);
  --col-neutral-4: hsl(38, 10%, 40%);
  --col-neutral-5: hsl(38, 10%, 16%);

  /* --- Semantic aliases --- */
  --color-background: var(--col-orange-1);
  --color-foreground: var(--col-orange-5);
  --color-primary: var(--col-orange-4);
  --color-primary-foreground: #fff;
  --color-accent: var(--col-teal-4);
  --color-accent-foreground: var(--col-teal-1);
  --color-muted: var(--col-neutral-3);
  --color-muted-foreground: var(--col-neutral-4);
  --color-border: var(--col-neutral-2);
  --color-ring: var(--col-teal-4);
  --color-destructive: hsl(0, 72%, 51%);
  --color-destructive-foreground: #fff;

  /* --- Typography --- */
  --font-sans: 'Open Sans Variable', 'Open Sans', system-ui, sans-serif;
  --container-width: 70ch;

  /* --- Radius --- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

/* --- Base styles --- */
html {
  font-size: 100%;
  font-family: var(--font-sans);
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.7;
}

::selection {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}