/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --blue-200: rgba(51,228,255,0.5); /* @kind color */
  --blue-300: rgba(51,228,255,0.75); /* @kind color */
  --grass-400: rgba(163,205,57,0.82); /* @kind color */
  --mint-300: rgba(25,184,144,0.75); /* @kind color */
  --mint-400: rgba(25,184,144,0.85); /* @kind color */
  --sun-400: rgba(237,195,23,0.82); /* @kind color */
  --surface-accent-blue-low: var(--blue-200); /* @kind color */
  --surface-accent-blue-med: var(--blue-300); /* @kind color */
  --surface-accent-mint-high: var(--mint-400); /* @kind color */
  --surface-accent-mint-med: var(--mint-300); /* @kind color */
  --surface-accent-success-high: var(--grass-400); /* @kind color */
  --surface-accent-sun-high: var(--sun-400); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --surface-accent-blue-low: var(--blue-200); /* @kind color */
  --surface-accent-blue-med: var(--blue-300); /* @kind color */
  --surface-accent-mint-high: var(--mint-400); /* @kind color */
  --surface-accent-mint-med: var(--mint-300); /* @kind color */
  --surface-accent-success-high: var(--grass-400); /* @kind color */
  --surface-accent-sun-high: var(--sun-400); /* @kind color */
}