/* Miko — generated from tokens.json */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --col-bg: #14161f;
  --col-surface: #1c1f2b;
  --col-subtle: #252936;
  --col-text: #e8eaf0;
  --col-text-soft: #b6bccb;
  --col-muted: #8b93a5;
  --col-faint: #5d6475;
  --col-invert: #e8eaf0;
  --col-accent: #ff9ec4;
  --col-accent-hover: #ffb6d3;
  --col-active: rgba(255, 158, 196, 0.16);
  --col-active-line: rgba(255, 158, 196, 0.5);
  --col-link: #ff9ec4;
  --col-focus: #ff9ec4;
  --col-line: rgba(255, 255, 255, 0.12);
  --col-line-strong: rgba(255, 255, 255, 0.22);
  --col-divider: rgba(255, 255, 255, 0.08);
  --col-hover: rgba(255, 255, 255, 0.07);
  --col-option: rgba(255, 255, 255, 0.04);
  --col-well: rgba(0, 0, 0, 0.25);
  --col-danger: #ff6b5e;
  --col-danger-tint: rgba(255, 107, 94, 0.16);
  --col-success: #7fd1a8;
  --col-card-1: #e07a5f;
  --col-card-2: #3d8a7a;
  --col-card-3: #6c63c7;
  --col-card-4: #d9a441;
  --col-card-5: #4f7fc4;
  --col-card-6: #c45c8a;
  --col-card-7: #6f9a4a;
  --col-scrim: rgba(0, 0, 0, 0.6);
  --col-shadow: rgba(0, 0, 0, 0.55);
  --col-hover-fill: rgba(255, 158, 196, 0.35);
  --col-hover-line: rgba(255, 158, 196, 0.9);
  --panel-bg: rgba(28, 31, 43, 0.82);
  --panel-line: rgba(255, 255, 255, 0.1);
  --pill-bg: rgba(20, 22, 31, 0.72);
  --col-when: #f2c14e;
  --col-talk: #6fa8ff;
  --col-decide: #ff9f5a;
  --col-change: #7fd1a8;
  --col-world: #b79cff;
  --shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.4);
  --shadow-popover: 0px 2px 30px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] {
  color-scheme: light;
  --col-bg: #ffffff;
  --col-surface: #ffffff;
  --col-subtle: #f5f5f5;
  --col-text: #000000;
  --col-text-soft: #646464;
  --col-muted: #79828d;
  --col-faint: #b4b9c0;
  --col-invert: #000000;
  --col-accent: #ffc8dd;
  --col-active: #ffeef5;
  --col-link: #d4619b;
  --col-focus: #ffc8dd;
  --col-line: rgba(0, 0, 0, 0.1);
  --col-line-strong: rgba(0, 0, 0, 0.2);
  --col-divider: rgba(0, 0, 0, 0.06);
  --col-hover: rgba(0, 0, 0, 0.05);
  --col-option: rgba(0, 0, 0, 0.03);
  --col-well: rgba(0, 0, 0, 0.06);
  --col-scrim: rgba(0, 0, 0, 0.3);
  --col-shadow: rgba(0, 0, 0, 0.1);
  --panel-bg: rgba(255, 255, 255, 0.82);
  --panel-line: rgba(0, 0, 0, 0.08);
  --pill-bg: rgba(255, 255, 255, 0.72);
  --shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.12);
  --shadow-popover: 0px 2px 30px rgba(0, 0, 0, 0.1);
}

:root {
  --font-family: "Sen", sans-serif;
  --font-family-alt: "Raleway", sans-serif;
  --block-size-small: 4px;
  --block-size-tiny: 8px;
  --block-size-medium: 10px;
  --chrome-gap: 12px;
  --block-size: 16px;
  --button-size: 60px;
  --chrome-top: 68px;
  --canvas-max-size: 480px;
  --radius-small: 6px;
  --radius-control: 7px;
  --radius-inner: 8px;
  --radius-panel: 14px;
  --radius-card: 20px;
  --transition: 0.1s cubic-bezier(0, 0, 0.3, 0.9);
  --transition-pop: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  --panel-blur: blur(14px) saturate(1.2);
}