/* nano.me's design tokens: nanocoai/nanoco-design's tokens.css as on its main (6 Oct), formatted by Biome. The page was
   designed on these (the action colour is teal here; the platform app's own copy has since moved it to ink). To
   refresh, copy nanoco-design's tokens.css again. */

/* GENERATED by design/build.mjs — do not edit. Source: design/tokens/*.json */

:root {
  color-scheme: light;
  /* color · primitives (referenced by the semantic layer — screens use semantics only) */
  --color-paper: #ffffff;
  --color-ink-50: #faf8f4;
  --color-ink-100: #f2eee8;
  --color-ink-200: #e7e0d6;
  --color-ink-300: #bdb3a8;
  --color-ink-400: #aaa096;
  --color-ink-600: #776e65;
  --color-ink-700: #514a43;
  --color-ink-900: #342e29;
  --color-ink-950: #1d1915;
  --color-night-400: #535353;
  --color-night-500: #323232;
  --color-night-700: #1b1b1b;
  --color-night-800: #111111;
  --color-night-900: #080808;
  --color-teal-50: #eaf6f3;
  --color-teal-100: #dff3ef;
  --color-teal-400: #91c9c2;
  --color-teal-700: #0f756d;
  --color-teal-900: #095d57;
  --color-teal-950: #14342f;
  --color-mint-200: #91f6e6;
  --color-mint-400: #56edd6;
  --color-red-50: #fff0eb;
  --color-red-400: #ff8c72;
  --color-red-600: #c0482b;
  --color-red-950: #321b16;
  --color-amber-50: #fff4d8;
  --color-amber-400: #efbd65;
  --color-amber-700: #b45309;
  --color-amber-950: #302510;
  --color-purple-50: #f3edf8;
  --color-purple-400: #c2a3e6;
  --color-purple-700: #6b3f8c;
  --color-purple-950: #2b1e36;
  --color-blue-50: #eef4ff;
  --color-blue-400: #7fa8f0;
  --color-blue-700: #2a5fc4;
  --color-blue-950: #16233d;
  /* color · semantic — the public API */
  --color-bg: var(--color-paper);
  --color-surface: var(--color-paper);
  --color-surface-2: var(--color-ink-50);
  --color-surface-3: var(--color-ink-100);
  --color-text: var(--color-ink-950);
  --color-text-soft: var(--color-ink-700);
  --color-text-faint: var(--color-ink-600);
  --color-text-disabled: var(--color-ink-400);
  --color-border: var(--color-ink-200);
  --color-border-strong: var(--color-ink-300);
  --color-action: var(--color-teal-700);
  --color-action-hover: var(--color-teal-900);
  --color-action-soft: var(--color-teal-50);
  --color-action-border: var(--color-teal-400);
  --color-on-action: var(--color-paper);
  --color-ring: rgb(15 117 109 / 24%);
  --color-scrim: rgb(29 25 21 / 32%);
  --color-danger: var(--color-red-600);
  --color-danger-soft: var(--color-red-50);
  --color-warning: var(--color-amber-700);
  --color-warning-soft: var(--color-amber-50);
  --color-warning-fill: var(--color-amber-400);
  --color-success: var(--color-teal-700);
  --color-success-soft: var(--color-teal-100);
  --color-info: var(--color-purple-700);
  --color-info-soft: var(--color-purple-50);
  --color-drop: var(--color-blue-700);
  --color-drop-soft: var(--color-blue-50);
  /* type */
  --font-sans: "DM Sans", sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --text-2xs: 10px;
  --leading-2xs: 14px;
  --tracking-2xs: 0em;
  --text-xs: 12px;
  --leading-xs: 16px;
  --tracking-xs: -0.01em;
  --text-sm: 14px;
  --leading-sm: 18px;
  --tracking-sm: -0.02em;
  --text-base: 16px;
  --leading-base: 20px;
  --tracking-base: -0.02em;
  --text-lg: 19px;
  --leading-lg: 24px;
  --tracking-lg: -0.02em;
  --text-xl: 24px;
  --leading-xl: 32px;
  --tracking-xl: -0.04em;
  --text-label: 16px;
  --leading-label: 24px;
  --tracking-label: -0.01em;
  --text-label-sm: 14px;
  --leading-label-sm: 20px;
  --tracking-label-sm: -0.01em;
  --text-label-xs: 12px;
  --leading-label-xs: 16px;
  --tracking-label-xs: -0.01em;
  --text-2xl: clamp(28px, 2vw + 22px, 32px);
  --leading-2xl: 40px;
  --tracking-2xl: -0.025em;
  --text-3xl: clamp(36px, 4vw, 44px);
  --leading-3xl: 48px;
  --tracking-3xl: -0.045em;
  --text-4xl: clamp(44px, 6vw, 56px);
  --leading-4xl: 60px;
  --tracking-4xl: -0.045em;
  --text-5xl: clamp(52px, 9vw, 72px);
  --leading-5xl: 74px;
  --tracking-5xl: -0.045em;
  --text-code-sm: 12px;
  --leading-code-sm: 16px;
  --tracking-code-sm: 0em;
  --text-code: 14px;
  --leading-code: 20px;
  --tracking-code: 0em;
  --tracking-tight: -0.045em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  /* space · radius · size */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-half: 4px;
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-half: 4px;
  --radius-full: 999px;
  --size-control-sm: 32px;
  --size-control: 40px;
  --size-control-lg: 56px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  /* elevation — level 0 is the default; the hairline does the work */
  --elevation-0: none;
  --elevation-1: 0 0 1px rgb(29 25 21 / 8%), 0 1px 2px rgb(29 25 21 / 6%);
  --elevation-surface-1: var(--color-surface);
  --elevation-2:
    0 0 0 1px rgb(29 25 21 / 6%), 0 1px 2px rgb(29 25 21 / 5%), 0 4px 8px -2px rgb(29 25 21 / 6%),
    0 12px 24px -8px rgb(29 25 21 / 8%);
  --elevation-surface-2: var(--color-surface);
  --elevation-3:
    0 0 0 1px rgb(0 0 0 / 6%), 0 1px 1px -0.5px rgb(0 0 0 / 6%), 0 3px 3px -1.5px rgb(0 0 0 / 6%), 0 6px 6px -3px rgb(
      0 0 0 /
      6%
    ), 0 12px 12px -6px rgb(0 0 0 / 6%);
  --elevation-surface-3: var(--color-surface);
  --elevation-4:
    0 0 0 1px rgb(0 0 0 / 6%), 0 1px 1px -0.5px rgb(0 0 0 / 6%), 0 3px 3px -1.5px rgb(0 0 0 / 6%), 0 6px 6px -3px rgb(
      0 0 0 /
      6%
    ), 0 12px 12px -6px rgb(0 0 0 / 6%), 0 24px 24px -12px rgb(0 0 0 / 6%);
  --elevation-surface-4: var(--color-surface);
  /* motion — nothing slower than 400ms */
  --motion-fast: 120ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark is a remapping, not a redesign: same names, night grounds, mint takes over action. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--color-night-800);
    --color-surface: var(--color-night-700);
    --color-surface-2: var(--color-night-900);
    --color-surface-3: var(--color-night-700);
    --color-text: var(--color-ink-50);
    --color-text-soft: var(--color-ink-300);
    --color-text-faint: var(--color-ink-400);
    --color-text-disabled: var(--color-ink-600);
    --color-border: var(--color-night-500);
    --color-border-strong: var(--color-night-400);
    --color-action: var(--color-mint-400);
    --color-action-hover: var(--color-mint-200);
    --color-action-soft: var(--color-teal-950);
    --color-action-border: var(--color-teal-900);
    --color-on-action: var(--color-night-900);
    --color-ring: rgb(86 237 214 / 32%);
    --color-scrim: rgb(0 0 0 / 60%);
    --color-danger: var(--color-red-400);
    --color-danger-soft: var(--color-red-950);
    --color-warning: var(--color-amber-400);
    --color-warning-soft: var(--color-amber-950);
    --color-warning-fill: var(--color-amber-400);
    --color-success: var(--color-mint-400);
    --color-success-soft: var(--color-teal-950);
    --color-info: var(--color-purple-400);
    --color-info-soft: var(--color-purple-950);
    --color-drop: var(--color-blue-400);
    --color-drop-soft: var(--color-blue-950);
    --elevation-1: 0 0 1px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 40%);
    --elevation-surface-1: #1b1b1b;
    --elevation-2:
      0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 8px -2px rgb(0 0 0 / 35%),
      0 12px 24px -8px rgb(0 0 0 / 45%);
    --elevation-surface-2: #1f1f1f;
    --elevation-3:
      0 0 0 1px rgb(255 255 255 / 6%), 0 1px 1px -0.5px rgb(0 0 0 / 30%), 0 3px 3px -1.5px rgb(0 0 0 / 30%), 0 6px 6px -3px rgb(
        0 0 0 /
        30%
      ), 0 12px 12px -6px rgb(0 0 0 / 30%);
    --elevation-surface-3: #262626;
    --elevation-4:
      0 0 0 1px rgb(255 255 255 / 6%), 0 1px 1px -0.5px rgb(0 0 0 / 30%), 0 3px 3px -1.5px rgb(0 0 0 / 30%), 0 6px 6px -3px rgb(
        0 0 0 /
        30%
      ), 0 12px 12px -6px rgb(0 0 0 / 30%), 0 24px 24px -12px rgb(0 0 0 / 30%);
    --elevation-surface-4: #2b2b2b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--color-night-800);
  --color-surface: var(--color-night-700);
  --color-surface-2: var(--color-night-900);
  --color-surface-3: var(--color-night-700);
  --color-text: var(--color-ink-50);
  --color-text-soft: var(--color-ink-300);
  --color-text-faint: var(--color-ink-400);
  --color-text-disabled: var(--color-ink-600);
  --color-border: var(--color-night-500);
  --color-border-strong: var(--color-night-400);
  --color-action: var(--color-mint-400);
  --color-action-hover: var(--color-mint-200);
  --color-action-soft: var(--color-teal-950);
  --color-action-border: var(--color-teal-900);
  --color-on-action: var(--color-night-900);
  --color-ring: rgb(86 237 214 / 32%);
  --color-scrim: rgb(0 0 0 / 60%);
  --color-danger: var(--color-red-400);
  --color-danger-soft: var(--color-red-950);
  --color-warning: var(--color-amber-400);
  --color-warning-soft: var(--color-amber-950);
  --color-warning-fill: var(--color-amber-400);
  --color-success: var(--color-mint-400);
  --color-success-soft: var(--color-teal-950);
  --color-info: var(--color-purple-400);
  --color-info-soft: var(--color-purple-950);
  --color-drop: var(--color-blue-400);
  --color-drop-soft: var(--color-blue-950);
  --elevation-1: 0 0 1px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 40%);
  --elevation-surface-1: #1b1b1b;
  --elevation-2:
    0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 8px -2px rgb(0 0 0 / 35%),
    0 12px 24px -8px rgb(0 0 0 / 45%);
  --elevation-surface-2: #1f1f1f;
  --elevation-3:
    0 0 0 1px rgb(255 255 255 / 6%), 0 1px 1px -0.5px rgb(0 0 0 / 30%), 0 3px 3px -1.5px rgb(0 0 0 / 30%), 0 6px 6px -3px rgb(
      0 0 0 /
      30%
    ), 0 12px 12px -6px rgb(0 0 0 / 30%);
  --elevation-surface-3: #262626;
  --elevation-4:
    0 0 0 1px rgb(255 255 255 / 6%), 0 1px 1px -0.5px rgb(0 0 0 / 30%), 0 3px 3px -1.5px rgb(0 0 0 / 30%), 0 6px 6px -3px rgb(
      0 0 0 /
      30%
    ), 0 12px 12px -6px rgb(0 0 0 / 30%), 0 24px 24px -12px rgb(0 0 0 / 30%);
  --elevation-surface-4: #2b2b2b;
}

/* The reduced-motion contract lives here, not in each component. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}