/* Mirror of molda-local app/styles/tokens.css. Update both together so the site and the desktop app stay identical. */
:root {
  --navy-50: #eef3fa;
  --navy-100: #dbe5f3;
  --navy-200: #b8cbe6;
  --navy-300: #8fb0de;
  --navy-400: #5f88c4;
  --navy-500: #3a67a8;
  --navy-600: #1f4a86;
  --navy-700: #143a6e;
  --navy-800: #0b2d59;
  --navy-900: #082347;

  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --control-h: 34px;
  --control-h-sm: 28px;

  --duration-fast: 120ms;
  --duration: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef0f3;
  --surface-hover: #f1f3f6;
  --surface-active: #e7eaef;
  --border: #e4e7ec;
  --border-strong: #cfd5dd;
  --text: #13171d;
  --text-muted: #4b5462;
  --text-subtle: #6b7482;
  --text-inverse: #ffffff;

  --accent: var(--navy-800);
  --accent-solid: var(--navy-800);
  --accent-solid-hover: var(--navy-900);
  --accent-soft: var(--navy-50);
  --accent-soft-border: var(--navy-100);
  --on-accent: #ffffff;

  --favorite: #c98a14;
  --favorite-soft: #fdf3dc;
  --danger: #b3261e;
  --danger-soft: #fdecea;
  --danger-border: #f3c1bb;
  --success: #1f7a4d;
  --success-soft: #e7f4ec;
  --warning: #8a5a12;
  --warning-soft: #fdf1dc;
  --warning-border: #efcf8f;

  --region-1: #e5484d;
  --region-2: #2f80ed;
  --region-3: #1f9d55;
  --region-4: #d97706;

  --canvas: #f3f4f6;
  --canvas-dot: #cdd2da;
  --edge: #8a96a8;
  --note: #fff8dc;
  --note-border: #eedc9a;

  --inverse-bg: #1b2029;
  --inverse-text: #eef1f5;
  --inverse-muted: #a9b1be;
  --inverse-accent: #b8cbe6;
  --stage: #0b0d10;
  --image-overlay: rgba(13, 16, 20, .6);
  --on-image: #ffffff;

  --scrim: rgba(13, 16, 20, .48);
  --focus-ring: 0 0 0 3px rgba(31, 74, 134, .32);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 1px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .14), 0 4px 12px rgba(16, 24, 40, .06);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216;
    --surface: #161a20;
    --surface-raised: #1c2129;
    --surface-sunken: #0b0d10;
    --surface-hover: #212731;
    --surface-active: #2a313c;
    --border: #262c36;
    --border-strong: #363e4b;
    --text: #e8ebf0;
    --text-muted: #a9b1be;
    --text-subtle: #7f8998;
    --text-inverse: #0f1216;

    --accent: var(--navy-300);
    --accent-solid: var(--navy-500);
    --accent-solid-hover: var(--navy-400);
    --accent-soft: rgba(143, 176, 222, .14);
    --accent-soft-border: rgba(143, 176, 222, .28);

    --favorite: #e8b04a;
    --favorite-soft: rgba(232, 176, 74, .16);
    --danger: #f28b82;
    --danger-soft: rgba(242, 139, 130, .12);
    --danger-border: rgba(242, 139, 130, .32);
    --success: #6fcf97;
    --success-soft: rgba(111, 207, 151, .12);
    --warning: #e6b95c;
    --warning-soft: rgba(230, 185, 92, .12);
    --warning-border: rgba(230, 185, 92, .32);

    --region-1: #ff6b6f;
    --region-2: #5aa2ff;
    --region-3: #3ecf7c;
    --region-4: #f5a524;

    --canvas: #111418;
    --canvas-dot: #262c35;
    --edge: #56627a;
    --note: #2a2618;
    --note-border: #4a4226;

    --inverse-bg: #2a313c;

    --scrim: rgba(0, 0, 0, .62);
    --focus-ring: 0 0 0 3px rgba(143, 176, 222, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #161a20;
  --surface-raised: #1c2129;
  --surface-sunken: #0b0d10;
  --surface-hover: #212731;
  --surface-active: #2a313c;
  --border: #262c36;
  --border-strong: #363e4b;
  --text: #e8ebf0;
  --text-muted: #a9b1be;
  --text-subtle: #7f8998;
  --text-inverse: #0f1216;

  --accent: var(--navy-300);
  --accent-solid: var(--navy-500);
  --accent-solid-hover: var(--navy-400);
  --accent-soft: rgba(143, 176, 222, .14);
  --accent-soft-border: rgba(143, 176, 222, .28);

  --favorite: #e8b04a;
  --favorite-soft: rgba(232, 176, 74, .16);
  --danger: #f28b82;
  --danger-soft: rgba(242, 139, 130, .12);
  --danger-border: rgba(242, 139, 130, .32);
  --success: #6fcf97;
  --success-soft: rgba(111, 207, 151, .12);
  --warning: #e6b95c;
  --warning-soft: rgba(230, 185, 92, .12);
  --warning-border: rgba(230, 185, 92, .32);

  --region-1: #ff6b6f;
  --region-2: #5aa2ff;
  --region-3: #3ecf7c;
  --region-4: #f5a524;

  --canvas: #111418;
  --canvas-dot: #262c35;
  --edge: #56627a;
  --note: #2a2618;
  --note-border: #4a4226;

  --inverse-bg: #2a313c;

  --scrim: rgba(0, 0, 0, .62);
  --focus-ring: 0 0 0 3px rgba(143, 176, 222, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35);

  color-scheme: dark;
}