:root {
  /* =========================================================
     1. PRIMITIVE TOKENS
     Raw color values. Components should usually use semantic
     tokens below instead of referencing these directly.
     ========================================================= */

  /* Brand */
  --accent-500: #d4f25c;
  --accent: var(--accent-500);

  /* Standalone app background */
  --app-background: #1b1a1d;

  /* Figma prototype accent and result colors */
  --blue-action: #0065ff;
  --blue-win: #6ba6ff;
  --blue-win-soft: #6798ff;
  --orange-loss: #f78406;

  /* Cool neutral scale — black to white (neutral-400 is #8F8F91) */
  --neutral-0: #000000;
  --neutral-75: #202020;
  --neutral-100: #242425;
  --neutral-200: #474749;
  --neutral-300: #6b6b6d;
  --neutral-400: #8f8f91;
  --neutral-500: #a6a6a8;
  --neutral-600: #bdbdbf;
  --neutral-700: #d4d4d5;
  --neutral-800: #ebebec;
  --neutral-900: #ffffff;

  /* Neutral / dark scale */
  --ink-0: #000000;
  --ink-1: #1b1a1d;
  --ink-2: #2a292e;
  --ink-3: #2c2b30;
  --ink-4: #3a393e;
  --ink-5: #4f4e53;
  --grey-400: #8f8f91;
  --grey-200: #c9c9cb;
  --white: #ffffff;

  /* Extended palette — inherited from the original prototype */
  --lilac-300: #e0d3f2;
  --lilac-500: #c5afe4;
  --lilac-600: #b197d2;
  --sage-100: #eaf0e7;
  --sage-300: #e8e9e0;
  --sage-500: #cfdecb;
  --butter-300: #fff3cf;
  --butter-500: #fee7a6;

  /* Figma primitive palette — imported from Badminton App / Section 2 */
  /* Blue */
  --blue-50: #e6eefc;
  --blue-75: #97bbf4;
  --blue-100: #6c9fef;
  --blue-200: #2d75e8;
  --blue-300: #0259e3;
  --blue-400: #013e9f;
  --blue-500: #01368a;

  /* Orange */
  --orange-50: #fff3e6;
  --orange-75: #ffce98;
  --orange-100: #ffba6d;
  --orange-200: #ff9c2e;
  --orange-300: #ff8803;
  --orange-400: #b35f02;
  --orange-500: #9c5302;

  /* Violet */
  --violet-1: #eaeaec;
  --violet-2: #cbccd1;
  --violet-3: #a3a3ac;
  --violet-4: #787885;
  --violet-5: #4f5061;
  --violet-6: #28293e;
  --violet-7: #222335;
  --violet-8: #1c1d2c;
  --violet-9: #171723;
  --violet-10: #12121c;

  /* Green */
  --green-50: #e6f9f1;
  --green-75: #98e6c4;
  --green-100: #6ddcac;
  --green-200: #2ecd88;
  --green-300: #03c370;
  --green-400: #02894e;
  --green-500: #027744;

  /* Yellow */
  --yellow-50: #fffae6;
  --yellow-75: #ffea97;
  --yellow-100: #ffe16c;
  --yellow-200: #ffd52d;
  --yellow-300: #ffcc02;
  --yellow-400: #b38f01;
  --yellow-500: #9c7c01;

  /* Cyan */
  --cyan-50: #e6fafc;
  --cyan-75: #96ebf1;
  --cyan-100: #6be3eb;
  --cyan-200: #2bd6e3;
  --cyan-300: #00cedd;
  --cyan-400: #00909b;
  --cyan-500: #007e87;

  /* Purple */
  --purple-50: #f0e6fa;
  --purple-75: #c096eb;
  --purple-100: #a66be2;
  --purple-200: #802bd6;
  --purple-300: #6600cd;
  --purple-400: #470090;
  --purple-500: #3e007d;
  /* Red */
  --red-50: #ffefef;
  --red-75: #ffbcbc;
  --red-100: #ffa0a0;
  --red-200: #ff7878;
  --red-300: #ff5c5c;
  --red-400: #b34040;
  --red-500: #9c3838;

  /* =========================================================
     2. SEMANTIC TOKENS
     Describe what a color does, not what the color looks like.
     New product UI should prefer these tokens.
     ========================================================= */

  /* Background */
  --bg-primary: var(--app-background);
  --bg-secondary: var(--ink-2);

  /* Surface */
  --surface-primary: var(--violet-6);
  --surface-secondary: var(--violet-7);
  --surface-muted: var(--violet-8);
  --surface-inset-light: rgba(255, 255, 255, .55);

  /* Text */
  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-400);
  --text-tertiary: var(--neutral-300);
  --text-inverse: var(--ink-1);

  /* Ghost button */
  --ghost-button-outline: var(--neutral-200);
  --ghost-button-outline-highlight: var(--neutral-600);

  /* Input field */
  --input-field-text-default: var(--neutral-300);
  --input-field-bg: var(--neutral-75);
  --input-field-outline: var(--neutral-200);

  /* Border */
  --border-default: var(--violet-5);
  --border-strong: var(--white);

  /* Action */
  --action-primary: var(--blue-300);
  --action-on-primary: var(--neutral-800);
  --action-secondary: var(--app-background);

  /* Bottom navigation */
  --bottom-nav-outline: var(--neutral-100);

  /* Circular icon button */
  --icon-button-bg: var(--neutral-75);

  /* Filter pill */
  --filter-pill-bg: var(--neutral-75);
  --filter-pill-text-default: var(--text-secondary);
  --filter-pill-text-selected: var(--text-primary);
  --filter-pill-border-selected: var(--ghost-button-outline-highlight);

  /* Score pill */
  --score-pill-bg: var(--violet-7);

  /* Match result */
  --status-win: var(--blue-100);
  --status-loss: var(--orange-200);
  /* Feedback */
  --status-error: var(--red-400);

  /* Illustration — empty, error, success and connection states */
  --illustration-backdrop: var(--blue-100);
  --illustration-line: var(--blue-100);
  --illustration-fill: var(--blue-200);
  --illustration-surface: var(--bg-primary);
  --illustration-detail: var(--blue-50);

  /* Progress */
  --progress-active: var(--blue-100);
  --progress-inactive: var(--violet-8);
  --progress-start: var(--progress-active);
  --progress-end: var(--progress-inactive);
  --progress-track: var(--progress-inactive);


  /* =========================================================
     3. COMPATIBILITY ALIASES
     Keep older prototype names working while the app gradually
     moves to the semantic token names above.
     ========================================================= */

  --bg-app: var(--bg-primary);
  --bg-canvas: var(--bg-secondary);

  --surface-raised: var(--surface-primary);
  --surface-chip: var(--surface-primary);
  --surface-card-lilac: var(--lilac-500);
  --surface-card-sage: var(--sage-500);
  --surface-card-butter: var(--butter-500);

  --text-on-dark: var(--text-primary);
  --text-on-dark-muted: var(--text-secondary);
  --text-on-dark-subtle: var(--text-tertiary);
  --text-on-light: var(--text-inverse);
  --text-on-light-muted: rgba(27, 26, 29, .55);

  --border-dark: var(--border-default);
  --border-active: var(--border-strong);
}