/* Generated by website/tools/sync_design_system.py — do not edit.
 * Source: PicLoom design system, https://claude.ai/artifact/TGc452dndiTm9u7KXxpzL6
 * Version 1791139752-338f, synced 2026-10-04.
 * Site appearance: pearl. [data-theme] scopes any App appearance to a subtree. */

:root, [data-theme="pearl"] {
  --canvas: #f4f5f8;
  --panel: #ffffff;
  --soft: #eaedf2;
  --line: #dce0e7;
  --hairline: rgba(20, 23, 29, 0.08);
  --text: #14171d;
  --muted: #565e6c;
  --accent: #2f5fdc;
  --on-accent: #f4f5f8;
  --accent-fill: rgba(47, 95, 220, 0.16);
  --accent-glow: rgba(47, 95, 220, 0.35);
  --muted-fill: rgba(86, 94, 108, 0.14);
  --pop: #ffc35c;
  --pop-ink: #8a5300;
  --pop-fill: rgba(255, 195, 92, 0.18);
  --keep: #0d7a4a;
  --keep-fill: rgba(13, 122, 74, 0.16);
  --keep-glow: rgba(13, 122, 74, 0.4);
  --delete: #c72e3d;
  --delete-fill: rgba(199, 46, 61, 0.14);
  --delete-glow: rgba(199, 46, 61, 0.38);
  --on-pop: #1b1609;
  --scrim: rgba(0, 0, 0, 0.55);
  --on-photo: #ffffff;
  --paper: #f7f3e9;
  --paper-ink: #343933;
  --paper-muted: #6a7168;
  --stroll-canvas: #23180f;
  --stroll-panel: #3d2a19;
  --stroll-accent: #f3bc78;
  --font-sans: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans", -apple-system, system-ui, sans-serif;
  --font-serif: ui-serif, "New York", "Songti SC", "Hiragino Mincho ProN", Georgia, serif;
  --font-display: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans", -apple-system, system-ui, sans-serif;
  --type-large-title-size: 40px;
  --type-large-title-line: 44px;
  --type-large-title-weight: 800;
  --type-large-title-tracking: -1px;
  --type-tab-title-size: 32px;
  --type-tab-title-line: 38px;
  --type-tab-title-weight: 800;
  --type-tab-title-tracking: -0.8px;
  --type-title2-size: 24px;
  --type-title2-line: 30px;
  --type-title2-weight: 700;
  --type-title2-tracking: -0.4px;
  --type-title3-size: 20px;
  --type-title3-line: 26px;
  --type-title3-weight: 700;
  --type-title3-tracking: -0.2px;
  --type-stat-display-size: 72px;
  --type-stat-display-line: 72px;
  --type-stat-display-weight: 800;
  --type-stat-display-tracking: -2px;
  --type-headline-size: 17px;
  --type-headline-line: 22px;
  --type-headline-weight: 600;
  --type-body-size: 17px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-subheadline-size: 15px;
  --type-subheadline-line: 21px;
  --type-subheadline-weight: 400;
  --type-footnote-size: 13px;
  --type-footnote-line: 18px;
  --type-footnote-weight: 400;
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 500;
  --type-eyebrow-size: 11px;
  --type-eyebrow-line: 14px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: 1px;
  --type-story-title-size: 24px;
  --type-story-title-line: 30px;
  --type-story-title-weight: 600;
  --type-story-body-size: 17px;
  --type-story-body-line: 28px;
  --type-story-body-weight: 400;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --hit-target: 44px;
  --button-height: 54px;
  --content-max: 600px;
  --radius-badge: 8px;
  --radius-thumb: 14px;
  --radius-cell: 16px;
  --radius-icon: 10px;
  --radius-bubble: 22px;
  --radius-card: 24px;
  --radius-glass: 28px;
  --radius-pill: 999px;
  --shadow-photo: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-popover: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-paper: 0 12px 40px rgba(0, 0, 0, 0.16);
  --scale-pressed: 0.95;
  --scale-pressed-decision: 0.9;
  --opacity-disabled: 0.4;
  --spring-response: 0.32;
  --spring-damping: 0.72;
}

[data-theme="blue"] {
  --canvas: #0a1220;
  --panel: #14213a;
  --soft: #1c2c4a;
  --line: #2b3d5e;
  --hairline: rgba(242, 246, 255, 0.08);
  --text: #f2f6ff;
  --muted: #9eb0cb;
  --accent: #6aa8ff;
  --on-accent: #0a1220;
  --accent-fill: rgba(106, 168, 255, 0.16);
  --accent-glow: rgba(106, 168, 255, 0.35);
  --muted-fill: rgba(158, 176, 203, 0.14);
  --pop: #ffc35c;
  --pop-ink: #ffc35c;
  --pop-fill: rgba(255, 195, 92, 0.18);
  --keep: #4fe39e;
  --keep-fill: rgba(79, 227, 158, 0.16);
  --keep-glow: rgba(79, 227, 158, 0.4);
  --delete: #ff6370;
  --delete-fill: rgba(255, 99, 112, 0.14);
  --delete-glow: rgba(255, 99, 112, 0.38);
}

[data-theme="mint"] {
  --canvas: #0a1311;
  --panel: #15211d;
  --soft: #1e2f29;
  --line: #2c3f37;
  --hairline: rgba(239, 250, 244, 0.08);
  --text: #effaf4;
  --muted: #9cb4aa;
  --accent: #7fe0b4;
  --on-accent: #0a1311;
  --accent-fill: rgba(127, 224, 180, 0.16);
  --accent-glow: rgba(127, 224, 180, 0.35);
  --muted-fill: rgba(156, 180, 170, 0.14);
  --pop: #ffc35c;
  --pop-ink: #ffc35c;
  --pop-fill: rgba(255, 195, 92, 0.18);
  --keep: #4fe39e;
  --keep-fill: rgba(79, 227, 158, 0.16);
  --keep-glow: rgba(79, 227, 158, 0.4);
  --delete: #ff6370;
  --delete-fill: rgba(255, 99, 112, 0.14);
  --delete-glow: rgba(255, 99, 112, 0.38);
}

[data-theme="graphite"] {
  --canvas: #0d0e10;
  --panel: #1a1b1e;
  --soft: #25272b;
  --line: #35373c;
  --hairline: rgba(244, 244, 245, 0.08);
  --text: #f4f4f5;
  --muted: #a3a4ad;
  --accent: #ececef;
  --on-accent: #0d0e10;
  --accent-fill: rgba(236, 236, 239, 0.16);
  --accent-glow: rgba(236, 236, 239, 0.35);
  --muted-fill: rgba(163, 164, 173, 0.14);
  --pop: #ffc35c;
  --pop-ink: #ffc35c;
  --pop-fill: rgba(255, 195, 92, 0.18);
  --keep: #4fe39e;
  --keep-fill: rgba(79, 227, 158, 0.16);
  --keep-glow: rgba(79, 227, 158, 0.4);
  --delete: #ff6370;
  --delete-fill: rgba(255, 99, 112, 0.14);
  --delete-glow: rgba(255, 99, 112, 0.38);
}