/*
 * GENERATED by `npm run tokens` from docs/figma-variables/AdjustMint_variables.json.
 * Do not edit: change the variables in Figma, export them again and rerun.
 * Roles Figma does not define yet live in tokens.css. Figma roles with old names
 * are renamed here (scripts/tokens/roles.ts) until they are renamed in Figma.
 */

:root {
  /* ---- Primitives (Figma "Mode 1") ---- */

  /* Color */
  --color-amber-100: #fff2dc;
  --color-amber-200: #ffddb2;
  --color-amber-300: #fcc17c;
  --color-amber-400: #f0a646;
  --color-amber-500: #d98b09;
  --color-amber-600: #b97000;
  --color-amber-700: #9a5b00;
  --color-amber-800: #754200;
  --color-amber-900: #502b00;
  --color-black: #000000;
  --color-green-100: #e3fcf0;
  --color-green-200: #c0f2db;
  --color-green-300: #8be3bf;
  --color-green-400: #5ed0a5;
  --color-green-500: #44b68d;
  --color-green-600: #269973;
  --color-green-700: #1a7e5d;
  --color-green-800: #0c5e45;
  --color-green-900: #06402e;
  --color-red-100: #ffefed;
  --color-red-200: #ffd6d1;
  --color-red-300: #ffb1a9;
  --color-red-400: #ff8e86;
  --color-red-500: #fa6863;
  --color-red-600: #de4544;
  --color-red-700: #bd2e31;
  --color-red-800: #901e21;
  --color-red-900: #621516;
  --color-slate-100: #f4f7f5;
  --color-slate-200: #e4e9e7;
  --color-slate-300: #c7d0cc;
  --color-slate-400: #a9b8b1;
  --color-slate-500: #778880;
  --color-slate-600: #4a5a53;
  --color-slate-700: #33413b;
  --color-slate-800: #232e29;
  --color-slate-900: #16211d;
  --color-white: #ffffff;

  /* Size */
  --size-0: 0;
  --size-100: 0.125rem;
  --size-200: 0.25rem;
  --size-250: 0.375rem;
  --size-300: 0.5rem;
  --size-400: 0.75rem;
  --size-500: 1rem;
  --size-600: 1.25rem;
  --size-700: 1.5rem;
  --size-800: 1.75rem;
  --size-900: 2rem;
  --size-1000: 3rem;
  --size-1100: 4rem;
  --size-full: 999px;

  /* Space */
  --space-none: var(--size-0);
  --space-2xs: var(--size-100);
  --space-xs: var(--size-200);
  --space-sm: var(--size-300);
  --space-md: var(--size-400);
  --space-lg: var(--size-500);
  --space-xl: var(--size-700);
  --space-2xl: var(--size-900);
  --space-3xl: var(--size-1000);
  --space-4xl: var(--size-1100);

  /* Radius */
  --radius-none: var(--size-0);
  --radius-xs: var(--size-100);
  --radius-sm: var(--size-200);
  --radius-md: var(--size-300);
  --radius-lg: var(--size-400);
  --radius-xl: var(--size-500);
  --radius-2xl: var(--size-600);
  --radius-full: var(--size-full);

  /* Font */
  --font-family: 'Figtree';
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-hero: 2.5rem;
  --font-size-hero-wide: 3rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Elevation (Figma "Value"), in px */
  --elevation-blur: 16px;
  --elevation-offset-x: 0;
  --elevation-offset-y: 4px;
  --elevation-spread: 0;

  /* The one shadow, for things that float (DESIGN.md "Elevation & Depth"). */
  --shadow-float: var(--elevation-offset-x) var(--elevation-offset-y) var(--elevation-blur)
    var(--elevation-spread) var(--color-shadow-color);

  /* ---- Semantic colors: light theme (Figma "light") ---- */
  --color-border: var(--color-slate-300);
  --color-border-accent: var(--color-green-700);
  --color-border-control: var(--color-slate-500);
  --color-border-error: var(--color-red-700);
  --color-border-focus: var(--color-green-700);
  --color-border-subtle: var(--color-slate-200);
  --color-shadow-color: color-mix(in srgb, var(--color-slate-900) 16%, transparent);
  --color-surface: var(--color-slate-100);
  --color-surface-accent: var(--color-green-700);
  --color-surface-accent-bright: var(--color-green-400);
  --color-surface-accent-subtle: var(--color-green-100);
  --color-surface-action: var(--color-green-800);
  --color-surface-action-hover: var(--color-green-700);
  --color-surface-action-pressed: var(--color-green-900);
  --color-surface-badge: var(--color-green-100);
  --color-surface-disabled: var(--color-slate-200);
  --color-surface-error: var(--color-red-100);
  --color-surface-negative: var(--color-red-100);
  --color-surface-raised: var(--color-white);
  --color-surface-raised-inverse: var(--color-green-800);
  --color-surface-row-hover: var(--color-slate-200);
  --color-surface-scrim: color-mix(in srgb, var(--color-slate-900) 45%, transparent);
  --color-surface-secondary-hover: var(--color-green-300);
  --color-surface-secondary-pressed: var(--color-green-500);
  --color-surface-selected: var(--color-slate-900);
  --color-surface-tertiary-hover: var(--color-slate-200);
  --color-surface-tertiary-pressed: var(--color-slate-300);
  --color-surface-warning: var(--color-amber-100);
  --color-text-accent: var(--color-green-700);
  --color-text-accent-inverse: var(--color-green-200);
  --color-text-badge: var(--color-green-800);
  --color-text-disabled: var(--color-slate-500);
  --color-text-error: var(--color-red-700);
  --color-text-inverse: var(--color-slate-100);
  --color-text-negative: var(--color-red-700);
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-secondary-inverse: var(--color-slate-300);
  --color-text-warning: var(--color-amber-700);
}

/*
 * Semantic colors: dark theme (Figma "dark"). The appearance setting sets data-theme on
 * <html>: the device's dark mode applies unless the person chose Light, and Dark applies
 * whatever the device says.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-border: var(--color-slate-700);
    --color-border-accent: var(--color-green-400);
    --color-border-control: var(--color-slate-500);
    --color-border-error: var(--color-red-400);
    --color-border-focus: var(--color-slate-400);
    --color-border-subtle: var(--color-slate-700);
    --color-shadow-color: color-mix(in srgb, var(--color-black) 45%, transparent);
    --color-surface: var(--color-slate-900);
    --color-surface-accent: var(--color-green-400);
    --color-surface-accent-bright: var(--color-green-400);
    --color-surface-accent-subtle: var(--color-green-900);
    --color-surface-action: var(--color-green-200);
    --color-surface-action-hover: var(--color-green-400);
    --color-surface-action-pressed: var(--color-green-100);
    --color-surface-badge: var(--color-green-900);
    --color-surface-disabled: var(--color-slate-700);
    --color-surface-error: var(--color-red-900);
    --color-surface-negative: var(--color-red-900);
    --color-surface-raised: var(--color-slate-800);
    --color-surface-raised-inverse: var(--color-white);
    --color-surface-row-hover: var(--color-slate-700);
    --color-surface-scrim: #0000008c;
    --color-surface-secondary-hover: var(--color-green-700);
    --color-surface-secondary-pressed: var(--color-green-800);
    --color-surface-selected: var(--color-slate-100);
    --color-surface-tertiary-hover: var(--color-slate-700);
    --color-surface-tertiary-pressed: var(--color-slate-600);
    --color-surface-warning: var(--color-amber-900);
    --color-text-accent: var(--color-green-400);
    --color-text-accent-inverse: var(--color-green-700);
    --color-text-badge: var(--color-green-200);
    --color-text-disabled: var(--color-slate-500);
    --color-text-error: var(--color-red-400);
    --color-text-inverse: var(--color-slate-900);
    --color-text-negative: var(--color-red-400);
    --color-text-primary: var(--color-slate-100);
    --color-text-secondary: var(--color-slate-400);
    --color-text-secondary-inverse: var(--color-slate-600);
    --color-text-warning: var(--color-amber-400);
  }
}

:root[data-theme='dark'] {
  --color-border: var(--color-slate-700);
  --color-border-accent: var(--color-green-400);
  --color-border-control: var(--color-slate-500);
  --color-border-error: var(--color-red-400);
  --color-border-focus: var(--color-slate-400);
  --color-border-subtle: var(--color-slate-700);
  --color-shadow-color: color-mix(in srgb, var(--color-black) 45%, transparent);
  --color-surface: var(--color-slate-900);
  --color-surface-accent: var(--color-green-400);
  --color-surface-accent-bright: var(--color-green-400);
  --color-surface-accent-subtle: var(--color-green-900);
  --color-surface-action: var(--color-green-200);
  --color-surface-action-hover: var(--color-green-400);
  --color-surface-action-pressed: var(--color-green-100);
  --color-surface-badge: var(--color-green-900);
  --color-surface-disabled: var(--color-slate-700);
  --color-surface-error: var(--color-red-900);
  --color-surface-negative: var(--color-red-900);
  --color-surface-raised: var(--color-slate-800);
  --color-surface-raised-inverse: var(--color-white);
  --color-surface-row-hover: var(--color-slate-700);
  --color-surface-scrim: #0000008c;
  --color-surface-secondary-hover: var(--color-green-700);
  --color-surface-secondary-pressed: var(--color-green-800);
  --color-surface-selected: var(--color-slate-100);
  --color-surface-tertiary-hover: var(--color-slate-700);
  --color-surface-tertiary-pressed: var(--color-slate-600);
  --color-surface-warning: var(--color-amber-900);
  --color-text-accent: var(--color-green-400);
  --color-text-accent-inverse: var(--color-green-700);
  --color-text-badge: var(--color-green-200);
  --color-text-disabled: var(--color-slate-500);
  --color-text-error: var(--color-red-400);
  --color-text-inverse: var(--color-slate-900);
  --color-text-negative: var(--color-red-400);
  --color-text-primary: var(--color-slate-100);
  --color-text-secondary: var(--color-slate-400);
  --color-text-secondary-inverse: var(--color-slate-600);
  --color-text-warning: var(--color-amber-400);
}