/* Wanted Design System — Semantic aliases
   Friendly names layered over the Figma variable names in fig-tokens.css.
   These are the tokens consumers should reach for first. */

:root {
  /* Text / label */
  --text-strong: var(--label-strong);          /* #000 — max emphasis */
  --text-normal: var(--label-normal);           /* #171717 — default body/heading */
  --text-neutral: var(--label-neutral);         /* 88% — secondary */
  --text-alternative: var(--label-alternative); /* 61% — tertiary / captions */
  --text-assistive: var(--label-assistive);     /* 28% — hints / placeholder */
  --text-disable: var(--label-disable);         /* 16% — disabled */

  /* Surfaces / backgrounds */
  --surface: var(--background-normal-normal);            /* page */
  --surface-alt: var(--background-normal-alternative);   /* subtle grouped bg */
  --surface-elevated: var(--background-elevated-normal); /* cards / sheets */

  /* Primary brand blue */
  --primary: var(--primary-normal);      /* #3366FF */
  --primary-strong: var(--primary-strong);
  --primary-heavy: var(--primary-heavy);

  /* Fills (translucent neutral) */
  --fill: var(--fill-normal);
  --fill-strong: var(--fill-strong);
  --fill-alt: var(--fill-alternative);

  /* Lines / borders */
  --border: var(--line-normal-normal);       /* 22% */
  --border-neutral: var(--line-normal-neutral);   /* 16% */
  --border-subtle: var(--line-normal-alternative); /* 8% */

  /* Status */
  --positive: var(--status-positive);   /* green */
  --negative: var(--status-negative);   /* red */
  --cautionary: var(--status-cautionary); /* orange */

  /* Radii (px, from Frame/Modal collections) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation — Wanted uses soft, low-alpha black shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 4px rgba(23,23,23,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(23,23,23,0.07);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(23,23,23,0.06);
  --shadow-4: 0 8px 28px rgba(0,0,0,0.12), 0 4px 10px rgba(23,23,23,0.07);
}