/* Radix color ramps + semantic tokens, copied from tempoxyz/docs _root.css.
   Stays global so Tailwind v4 utilities work in MDX; Vocs chrome picks up
   these via vocs.config.ts theme variables referencing them by var().
   Landing page uses its own --landing-* tokens (scoped to .landing-root) and
   is not affected. */

/* biome-ignore format: <explanation> */
@theme {
  --color-black: #000000;
  --color-white: #ffffff;

  --color-gray1: light-dark(#fcfcfc, #111111);
  --color-gray2: light-dark(#f9f9f9, #191919);
  --color-gray3: light-dark(#f0f0f0, #222222);
  --color-gray4: light-dark(#e8e8e8, #2a2a2a);
  --color-gray5: light-dark(#e0e0e0, #313131);
  --color-gray6: light-dark(#d9d9d9, #3a3a3a);
  --color-gray7: light-dark(#cecece, #484848);
  --color-gray8: light-dark(#bbbbbb, #606060);
  --color-gray9: light-dark(#8d8d8d, #6e6e6e);
  --color-gray10: light-dark(#838383, #7b7b7b);
  --color-gray11: light-dark(#646464, #b4b4b4);
  --color-gray12: light-dark(#202020, #eeeeee);

  --color-grayA1: light-dark(#00000003, #00000000);
  --color-grayA2: light-dark(#00000006, #ffffff09);
  --color-grayA3: light-dark(#0000000f, #ffffff12);
  --color-grayA4: light-dark(#00000017, #ffffff1b);
  --color-grayA5: light-dark(#0000001f, #ffffff22);
  --color-grayA6: light-dark(#00000026, #ffffff2c);
  --color-grayA7: light-dark(#00000031, #ffffff3b);
  --color-grayA8: light-dark(#00000044, #ffffff55);
  --color-grayA9: light-dark(#00000072, #ffffff64);
  --color-grayA10: light-dark(#0000007c, #ffffff72);
  --color-grayA11: light-dark(#0000009b, #ffffffaf);
  --color-grayA12: light-dark(#000000df, #ffffffed);

  --color-blackA1: rgba(0, 0, 0, 0.05);
  --color-blackA2: rgba(0, 0, 0, 0.1);
  --color-blackA3: rgba(0, 0, 0, 0.15);
  --color-blackA4: rgba(0, 0, 0, 0.2);
  --color-blackA5: rgba(0, 0, 0, 0.3);
  --color-blackA6: rgba(0, 0, 0, 0.4);
  --color-blackA7: rgba(0, 0, 0, 0.5);
  --color-blackA8: rgba(0, 0, 0, 0.6);
  --color-blackA9: rgba(0, 0, 0, 0.7);
  --color-blackA10: rgba(0, 0, 0, 0.8);
  --color-blackA11: rgba(0, 0, 0, 0.9);
  --color-blackA12: rgba(0, 0, 0, 0.95);

  --color-whiteA1: rgba(255, 255, 255, 0.05);
  --color-whiteA2: rgba(255, 255, 255, 0.1);
  --color-whiteA3: rgba(255, 255, 255, 0.15);
  --color-whiteA4: rgba(255, 255, 255, 0.2);
  --color-whiteA5: rgba(255, 255, 255, 0.3);
  --color-whiteA6: rgba(255, 255, 255, 0.4);
  --color-whiteA7: rgba(255, 255, 255, 0.5);
  --color-whiteA8: rgba(255, 255, 255, 0.6);
  --color-whiteA9: rgba(255, 255, 255, 0.7);
  --color-whiteA10: rgba(255, 255, 255, 0.8);
  --color-whiteA11: rgba(255, 255, 255, 0.9);
  --color-whiteA12: rgba(255, 255, 255, 0.95);

  --color-blue1: light-dark(#fbfdff, #0d1520);
  --color-blue2: light-dark(#f4faff, #111927);
  --color-blue3: light-dark(#e6f4fe, #0d2847);
  --color-blue4: light-dark(#d5efff, #003362);
  --color-blue5: light-dark(#c2e5ff, #004074);
  --color-blue6: light-dark(#acd8fc, #104d87);
  --color-blue7: light-dark(#8ec8f6, #205d9e);
  --color-blue8: light-dark(#5eb1ef, #2870bd);
  --color-blue9: light-dark(#0090ff, #0090ff);
  --color-blue10: light-dark(#0588f0, #3b9eff);
  --color-blue11: light-dark(#0d74ce, #70b8ff);
  --color-blue12: light-dark(#113264, #c2e6ff);

  --color-amber1: light-dark(#fefdfb, #16120c);
  --color-amber2: light-dark(#fefbe9, #1d180f);
  --color-amber3: light-dark(#fff7c2, #302008);
  --color-amber4: light-dark(#ffee9c, #3f2700);
  --color-amber5: light-dark(#fbe577, #4d3000);
  --color-amber6: light-dark(#f3d673, #5c3d05);
  --color-amber7: light-dark(#e9c162, #714f19);
  --color-amber8: light-dark(#e2a336, #8f6424);
  --color-amber9: light-dark(#ffc53d, #ffc53d);
  --color-amber10: light-dark(#ffba18, #ffd60a);
  --color-amber11: light-dark(#ab6400, #ffca16);
  --color-amber12: light-dark(#4f3422, #ffe7b3);

  --color-green1: light-dark(#fbfefc, #0e1512);
  --color-green2: light-dark(#f4fbf6, #121b17);
  --color-green3: light-dark(#e6f6eb, #132d21);
  --color-green4: light-dark(#d6f1df, #113b29);
  --color-green5: light-dark(#c4e8d1, #174933);
  --color-green6: light-dark(#adddc0, #20573e);
  --color-green7: light-dark(#8eceaa, #28684a);
  --color-green8: light-dark(#5bb98b, #2f7c57);
  --color-green9: light-dark(#30a46c, #30a46c);
  --color-green10: light-dark(#2b9a66, #33b074);
  --color-green11: light-dark(#218358, #3dd68c);
  --color-green12: light-dark(#193b2d, #b1f1cb);

  --color-red1: light-dark(#fffcfc, #191111);
  --color-red2: light-dark(#fff7f7, #201314);
  --color-red3: light-dark(#feebec, #3b1219);
  --color-red4: light-dark(#ffdbdc, #500f1c);
  --color-red5: light-dark(#ffcdce, #611623);
  --color-red6: light-dark(#fdbdbe, #72232d);
  --color-red7: light-dark(#f4a9aa, #8c333a);
  --color-red8: light-dark(#eb8e90, #b54548);
  --color-red9: light-dark(#e5484d, #e5484d);
  --color-red10: light-dark(#dc3e42, #ec5d5e);
  --color-red11: light-dark(#ce2c31, #ff9592);
  --color-red12: light-dark(#641723, #ffd1d9);

  --color-violet1: light-dark(#fdfcfe, #14121f);
  --color-violet2: light-dark(#faf8ff, #1b1525);
  --color-violet3: light-dark(#f4f0fe, #291f43);
  --color-violet4: light-dark(#ebe4ff, #33255b);
  --color-violet5: light-dark(#e1d9ff, #3c2e69);
  --color-violet6: light-dark(#d4cafe, #473876);
  --color-violet7: light-dark(#c2b5f5, #56468b);
  --color-violet8: light-dark(#aa99ec, #6958ad);
  --color-violet9: light-dark(#6e56cf, #6e56cf);
  --color-violet10: light-dark(#654dc4, #7d66d9);
  --color-violet11: light-dark(#6550b9, #baa7ff);
  --color-violet12: light-dark(#2f265f, #e2ddfe);

  --color-jade1: light-dark(#fbfefd, #0d1512);
  --color-jade2: light-dark(#f4fbf7, #121c18);
  --color-jade3: light-dark(#e6f7ed, #0d2a1f);
  --color-jade4: light-dark(#d6f1e3, #113b29);
  --color-jade5: light-dark(#c3e9d7, #164430);
  --color-jade6: light-dark(#adddc3, #1b543a);
  --color-jade7: light-dark(#8eceaa, #236e4a);
  --color-jade8: light-dark(#5bb98b, #2a7e59);
  --color-jade9: light-dark(#30a46c, #30a46c);
  --color-jade10: light-dark(#299764, #33b074);
  --color-jade11: light-dark(#18794e, #3dd68c);
  --color-jade12: light-dark(#153226, #b1f1cb);

  --background-color-accent: var(--color-blue9);
  --background-color-accentHover: var(--color-blue10);
  --background-color-accentTint: var(--color-blueA3);
  --background-color-destructive: var(--color-red3);
  --background-color-destructiveHover: var(--color-red4);
  --background-color-destructiveTint: var(--color-red3);
  --background-color-invert: light-dark(var(--color-black), var(--color-white));
  --background-color-invertHover: light-dark(var(--color-blackA10), var(--color-whiteA10));
  --background-color-primary: light-dark(var(--color-gray1), var(--color-gray2));
  --background-color-primaryHover: var(--color-gray3);
  --background-color-secondary: light-dark(var(--color-gray2), var(--color-gray3));
  --background-color-surface: var(--color-gray3);
  --background-color-surfaceHover: var(--color-gray4);
  --background-color-success: var(--color-green9);
  --background-color-successHover: var(--color-green10);
  --background-color-successTint: var(--color-green4);
  --background-color-warning: var(--color-amber8);
  --background-color-warningHover: var(--color-amber7);
  --background-color-violet: var(--color-violet9);
  --background-color-violetHover: var(--color-violet10);

  --border-color-accent: var(--color-blue9);
  --border-color-accentHover: var(--color-blue10);
  --border-color-active: light-dark(var(--color-black), var(--color-white));
  --border-color-invert: light-dark(var(--color-black), var(--color-white));
  --border-color-primary: light-dark(var(--color-gray5), var(--color-gray4));
  --border-color-surface: light-dark(var(--color-gray4), var(--color-gray5));

  --text-color-accent: var(--color-blue10);
  --text-color-destructive: var(--color-red10);
  --text-color-invert: light-dark(var(--color-white), var(--color-black));
  --text-color-active: light-dark(var(--color-black), var(--color-white));
  --text-color-primary: var(--color-gray12);
  --text-color-secondary: var(--color-gray10);
  --text-color-success: var(--color-green10);
  --text-color-warning: var(--color-amber8);

  --height-button: 42px;

  --spacing-dialog: 360px;
  --spacing-titlebar: 36px;

  --radius-default: calc(infinity * 1px);
}
