/* tokens.css */

/* Outfit stands in for Gilroy until the client supplies the font files */
@font-face { font-family: "Outfit"; src: url("../public/fonts/Outfit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../public/fonts/Outfit-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../public/fonts/Outfit-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../public/fonts/Inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../public/fonts/Inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../public/fonts/Inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {

  --b100: #ecefff; --b200: #d9dfff; --b300: #c6cfff; --b400: #b3bfff; --b500: #a0afff; --b600: #8d9fff; --b700: #7a8fff; --b1000: #415fff;
  --ba: #2e42b2;
  --bt: #141c4d;
  --y1000: #ffc041; --p500: #bfa0ff; --p1000: #8041ff; --o1000: #ff8a41;
  --r300: #f7c4c4; --r500: #f29c9c; --r700: #ed7575; --r1000: #e53a3a;
  --g100: #e9f3ec; --g300: #bddcc5; --g500: #91c49e; --g700: #66ad77; --g900: #3a9650; --g1000: #248a3d;
  --cgreen: #30db5b; --cpink: #ff6482; --cblue: #007aff; --c100: #e6f2ff; --c300: #b3d7ff; --c900: #1a87ff;
  --white: #fff;
  --gs20: #fafafa; --gs40: #f5f5f6; --gs60: #f0f0f1; --gs80: #ebebed; --gs100: #e6e6e8; --gs120: #e1e1e4; --gs140: #dcdddf; --gs160: #d7d8da;
  --gs200: #cdced1; --gs240: #c3c4c8; --gs300: #b5b5ba; --gs500: #83848c; --gs600: #6a6b76; --gs660: #5b5d68; --gs700: #51535f; --gs740: #474956;
  --gs800: #393a48; --gs820: #343543; --gs840: #2f303f; --gs860: #2a2b3a; --gs880: #252735; --gs900: #202231; --gs940: #161828; --gs960: #111323; --gs980: #0c0e1f; --gs1000: #07091a;
  --ma: #2eb2a7; --m300: #c4f5f1;
  --primary-color: var(--b1000); --secondary-color: var(--ma); --bg-color: var(--gs40); --text-color: var(--bt); --text-secondary: var(--gs700);
  --bg-brand-subtle: var(--b100); --action-text-text: var(--b1000); --text-error: var(--r1000);



  /* page tokens */
  --bg: var(--bg-color);
  --surface: var(--white);
  --text: var(--text-color);
  --text-2: var(--text-secondary);
  --text-3: var(--gs500);
  --line: var(--gs120);
  --line-2: var(--gs160);
  --brand: var(--primary-color);
  --brand-hover: var(--b700);
  --brand-active: var(--ba);
  --brand-subtle: var(--bg-brand-subtle);
  --haze: radial-gradient(ellipse at center, var(--b200) 0%, transparent 70%);
  --card-hairline: inset 0 0 0 .5px var(--gs120);
  --ctl-ring: inset 0 0 0 1px var(--gs100);
  --ctl-ring-hover: inset 0 0 0 1px var(--b300);
  --ctl-ring-focus: inset 0 0 0 1px var(--b600);
  --ctl-ring-select: inset 0 0 0 .5px var(--gs200);
  --focus-outline: 2px solid var(--b600);
  --tile-fill: rgba(247, 248, 255, .8);    /* near-white over the haze */
  --tile-rim: rgba(217, 223, 255, .95);    /* b200 */
  --cover-grad: radial-gradient(ellipse 70% 90% at 55% 92%, #eef1fe 0%, rgba(238, 241, 254, 0) 100%), linear-gradient(90deg, #d8d6fc 0%, #e6e8fd 28%, #e9edff 50%, #e3e7ff 72%, #dde2ff 100%);



  --font-display: "Gilroy", "Outfit", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body: 1rem; --lh-body: 1.5rem;
  --fs-lg: 1.125rem; --lh-lg: 1.75rem;
  --fs-sm: .875rem; --lh-sm: 1.25rem;
  --fs-xs: .75rem; --lh-xs: 1rem;
  --fs-label: .75rem; --lh-label: 1rem;
  --fs-ctl: .875rem; --lh-ctl: 1.25rem;
  --fs-h3: 1.5rem; --lh-h3: 2.25rem;
  --fs-h3-lg: 1.75rem; --lh-h3-lg: 2.5rem;
  --fs-metric: clamp(2.25rem, 3.2vw, 2.75rem);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;


  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-45: 1.25rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section-pad: 3rem;
  --hero-top: 5.375rem; --hero-bottom: 4rem;
  --suffix-w: 6.5rem;
  --cover-h: 20rem;


  --r-tile: 8px; --r-ctl: 12px; --r-panel: 16px; --r-card: 24px; --r-chip: 32px; --r-tag: 999px;


  --maxw: 70rem; --gutter: 1.5rem;
  --control-h: 3rem;
  --gauge: 16rem; --gauge-lg: 18rem; --ring-stroke: 20;


  --ease: cubic-bezier(.2, .8, .2, 1); --d-1: 160ms; --d-2: 320ms; --d-3: 640ms;
}
@media (min-width: 48rem) { :root { --gutter: 3rem; } }
@media (min-width: 64rem) { :root { --section-pad: 4rem; } }
@media (min-width: 80rem) { :root { --section-pad: 5.375rem; } }