/* ---------------------------------------------------------------------------
   tokens.css — design tokens for the prodggect-20xx voter guide
   ---------------------------------------------------------------------------
   Palette is Radix Colors 3.0.0, dark theme (MIT). See web/DESIGN-NOTES.md for
   how these were verified against destiny.gg's stylesheet.

   Only the steps actually used are inlined here. To swap in the real package:
     npm i @radix-ui/colors
     @import "@radix-ui/colors/slate-dark.css";  (etc.)
   The variable names below deliberately match Radix's own so that swap is a
   straight substitution.
--------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Radix slate (dark) — neutrals. Blue-tinted, NOT pure gray. --- */
  --slate-1:  #111113;
  --slate-2:  #18191b;
  --slate-3:  #212225;
  --slate-4:  #272a2d;
  --slate-5:  #2e3135;
  --slate-6:  #363a3f;
  --slate-7:  #43484e;
  --slate-8:  #5a6169;
  --slate-9:  #696e77;
  --slate-10: #777b84;
  --slate-11: #b0b4ba;
  --slate-12: #edeef0;

  /* --- Radix blue (dark) — primary accent --- */
  --blue-2:  #111927;
  --blue-3:  #0d2847;
  --blue-6:  #104d87;
  --blue-7:  #205d9e;
  --blue-8:  #2870bd;
  --blue-9:  #0090ff;
  --blue-10: #3b9eff;
  --blue-11: #70b8ff;

  /* --- Radix jade (dark) — support / YES --- */
  --jade-2:  #121c18;
  --jade-3:  #0f2e22;
  --jade-6:  #1b5745;
  --jade-9:  #29a383;
  --jade-11: #1fd8a4;

  /* --- Radix red (dark) — oppose / NO --- */
  --red-2:  #201314;
  --red-3:  #3b1219;
  --red-6:  #72232d;
  --red-9:  #e5484d;
  --red-11: #ff9592;

  /* --- Radix amber (dark) — draft / unreviewed / watch --- */
  --amber-2:  #1d180f;
  --amber-3:  #302008;
  --amber-6:  #5c3d05;
  --amber-9:  #ffc53d;
  --amber-11: #ffca16;

  /* --- Semantic aliases -------------------------------------------------- */
  --bg-app:          var(--slate-1);
  --bg-surface:      var(--slate-2);
  --bg-raised:       var(--slate-3);
  --bg-raised-hover: var(--slate-4);

  --border-subtle:      var(--slate-6);
  --border-interactive: var(--slate-7);
  --border-hover:       var(--slate-8);

  --text-primary:   var(--slate-12);
  --text-secondary: var(--slate-11);
  --text-muted:     var(--slate-10);

  --accent-solid:        var(--blue-9);
  --accent-solid-hover:  var(--blue-10);
  --accent-solid-active: var(--blue-8);
  --accent-text:         var(--blue-11);

  /* --- Type -------------------------------------------------------------- */
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* dgg's scale is unusually tight: four sizes carry the whole site */
  --text-xs:   .75rem;   --leading-xs:   1.125rem;
  --text-sm:   .88rem;   --leading-sm:   1.25rem;
  --text-base: 1rem;     --leading-base: 1.5rem;
  --text-lg:   1.5rem;   --leading-lg:   1.5rem;
  --text-xl:   1.88rem;  --leading-xl:   1.88rem;
  --text-2xl:  3rem;     --leading-2xl:  3rem;

  /* --- Radii ------------------------------------------------------------- */
  --radius-sm:    .5rem;
  --radius-md:    .625rem;   /* buttons */
  --radius-lg:    .75rem;    /* cards */
  --radius-xl:    .875rem;
  --radius-pill:  624.9375rem;

  /* --- Motion — dgg uses one duration almost everywhere ------------------ */
  --transition: 150ms ease;

  /* --- Layout ------------------------------------------------------------ */
  --wrapper: min(72rem, 100% - 4rem);
  --wrapper-narrow: min(52rem, 100% - 4rem);
}