/* tokens.css
   OBYR website — every colour, font, radius and duration lives here.
   These values come from the OBYR Design System. Change a brand colour
   here and it changes everywhere. Do not hard-code hex values elsewhere.
   ---------------------------------------------------------------- */

:root{
  /* brand */
  --teal:#00BDA7;
  --teal-hover:#009C85;
  --teal-active:#007A68;
  --teal-ink:#003D36;      /* deep teal — used as the dark canvas */
  --teal-ink-2:#00251F;
  --mint:#E0FAF5;
  --mint-2:#B8F0E6;
  --gold:#FDDA5B;
  --gold-2:#F5C518;

  /* semantic */
  --bg:#FFFFFF;
  --ink:#111111;
  --muted-fg:#5C5C5C;
  --border:#D8ECE8;
  --danger:#C03A2B;

  /* spectrum / charts */
  --sp-1:#00BDA7; --sp-2:#2F6FD6; --sp-3:#A35CD6; --sp-4:#CE6CAA; --sp-5:#F5C518;
  --brand-gradient:linear-gradient(90deg,#00BDA7 0%,#2F6FD6 32%,#A35CD6 55%,#CE6CAA 75%,#FDDB5B 100%);

  /* type */
  --display:"League Spartan","Manrope",sans-serif;
  --sans:"Manrope",system-ui,sans-serif;
  --mono:"IBM Plex Mono",Menlo,monospace;

  /* shape + motion (4px grid) */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(17,17,17,.06);
  --sh-md:0 4px 16px rgba(0,61,54,.10);
  --sh-lg:0 12px 32px rgba(0,61,54,.16);
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:200ms; --dur-fast:120ms;
}