/* METAVSHN colour system.
   Source of truth: metavshn-website src/index.css (all colours declared as HSL).
   Two layers: raw HSL triplets (--*-hsl, for hsl(var(--x) / alpha) composition,
   the convention the site uses) and resolved semantic aliases. */
:root {
  /* Brand */
  --brand-primary-hsl: 243 27% 51%; /* @kind color */
  --brand-secondary-hsl: 220 15% 20%; /* @kind color */
  --brand-light-hsl: 0 0% 100%; /* @kind color */
  --brand-primary: hsl(243 27% 51%);
  --brand-primary-tint: hsl(243 40% 65%);
  --brand-secondary: hsl(220 15% 20%);
  --brand-light: hsl(0 0% 100%);

  /* Surfaces + ink */
  --background-hsl: 0 0% 100%; /* @kind color */
  --foreground-hsl: 220 15% 20%; /* @kind color */
  --card-hsl: 0 0% 100%; /* @kind color */
  --muted-hsl: 220 15% 96%; /* @kind color */
  --muted-foreground-hsl: 220 15% 40%; /* @kind color */
  --border-hsl: 220 15% 91%; /* @kind color */

  --surface-page: hsl(0 0% 100%);
  --surface-card: hsl(0 0% 100%);
  --surface-muted: hsl(220 15% 96%);
  --surface-inverse: hsl(220 15% 20%);

  --text-body: hsl(220 15% 20%);
  --text-muted: hsl(220 15% 40%);
  --text-on-brand: hsl(0 0% 100%);
  --text-on-inverse: hsl(0 0% 100%);
  --text-link: hsl(243 27% 51%);

  --border-default: hsl(220 15% 91%);
  --border-strong: hsl(220 15% 20% / 0.15);
  --border-input: hsl(220 15% 91%);
  --ring: hsl(243 27% 51%);

  /* Semantic */
  --destructive-hsl: 0 84.2% 60.2%; /* @kind color */
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(210 40% 98%);

  /* Gradients — the two the site ships */
  --gradient-primary: linear-gradient(135deg, hsl(243 27% 51%), hsl(243 40% 65%)); /* @kind color */
  --gradient-hero: linear-gradient(135deg, hsl(243 27% 51%) 0%, hsl(243 40% 65%) 100%); /* @kind color */

  /* Image hairline: pure black in light, pure white in dark, low alpha */
  --img-outline: 0 0 0 / 0.1; /* @kind other */
}

.dark {
  --brand-primary-hsl: 243 40% 65%; /* @kind color */
  --brand-secondary-hsl: 0 0% 95%; /* @kind color */
  --brand-primary: hsl(243 40% 65%);
  --brand-primary-tint: hsl(243 50% 75%);
  --brand-secondary: hsl(0 0% 95%);

  --background-hsl: 220 15% 8%; /* @kind color */
  --foreground-hsl: 0 0% 95%; /* @kind color */
  --card-hsl: 220 15% 10%; /* @kind color */
  --muted-hsl: 220 15% 15%; /* @kind color */
  --muted-foreground-hsl: 220 15% 70%; /* @kind color */
  --border-hsl: 220 15% 20%; /* @kind color */

  --surface-page: hsl(220 15% 8%);
  --surface-card: hsl(220 15% 10%);
  --surface-muted: hsl(220 15% 15%);
  --surface-inverse: hsl(220 15% 20%);

  --text-body: hsl(0 0% 95%);
  --text-muted: hsl(220 15% 70%);
  --text-on-brand: hsl(220 15% 8%);
  --text-link: hsl(243 40% 65%);

  --border-default: hsl(220 15% 20%);
  --border-strong: hsl(0 0% 100% / 0.15);
  --border-input: hsl(220 15% 20%);
  --ring: hsl(243 40% 65%);

  --destructive: hsl(0 62.8% 30.6%);

  --gradient-primary: linear-gradient(135deg, hsl(243 40% 65%), hsl(243 50% 75%)); /* @kind color */
  --gradient-hero: linear-gradient(135deg, hsl(243 40% 65%) 0%, hsl(243 50% 75%) 100%); /* @kind color */

  --img-outline: 255 255 255 / 0.1; /* @kind other */
}