/* Generated by scripts/design-tokens.mjs from design/tokens.json. Do not edit by hand. Motion values come from design/system/motion.json. */

:root, [data-theme="light"] {
  --surface-base: #fff8f0;
  --surface-raised: #fffcf8;
  --surface-sunken: #f4ebe1;
  --surface-blush: #ede4f3;
  --surface-glass: rgba(255,248,240,0.72);
  --scrim: rgba(40,24,48,0.48);
  --line-hairline: #e6dce6;
  --line-strong: #8e7a95;
  --ink: #62446c;
  --ink-muted: #76617d;
  --brand-rose: #62446c;
  --brand-rose-strong: #4a3253;
  --on-brand: #fff8f0;
  --brand-blush: #dccde8;
  --brand-sage: #7a5f85;
  --brand-gold: #f4a477;
  --brand-gold-ink: #8a4a1f;
  --status-draft: var(--ink-muted);
  --status-review: var(--brand-gold-ink);
  --status-approved: #2f6b47;
  --status-published: var(--brand-rose);
  --status-failed: #b3392b;
  --focus-ring: #62446c;
  --brand-prime: #62446c;
  --brand-on-prime: #fff8f0;
  --brand-light-prime: #ede4f3;
  --brand-accent: #f4a477;
  --brand-accent-soft: #fde6d6;
  --status-info: #345f92;
  --status-approved-surface: #e6f2ea;
  --status-failed-surface: #fbe6e8;
  --status-review-surface: #fcf0d9;
  --status-info-surface: #e4edf7;
  --illu-lavender: #cdb9e0;
  --illu-rose: #f2bdb8;
  --illu-peach: #f9d0b4;
  --illu-sun: #f5d78e;
  --illu-sage: #bcd1b3;
  --illu-sea: #a9cdd6;
  --illu-sky: #c6d8ef;
  --illu-sand: #eadbc6;
  --shadow-raised: 0 2px 6px -2px rgba(64,40,72,0.22);
  --shadow-card: 0 18px 40px -24px rgba(64,40,72,0.45);
  --shadow-reveal: 0 36px 70px -32px rgba(64,40,72,0.5);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 24px -16px rgba(40,28,48,0.4);
}

[data-theme="dark"] {
  --surface-base: #241a2a;
  --surface-raised: #2e2235;
  --surface-sunken: #1a121f;
  --surface-blush: #392a43;
  --surface-glass: rgba(36,26,42,0.68);
  --scrim: rgba(10,6,12,0.66);
  --line-hairline: #3d2f45;
  --line-strong: #8f7c97;
  --ink: #fff8f0;
  --ink-muted: #c9bbcf;
  --brand-rose: #fff8f0;
  --brand-rose-strong: #ede4f3;
  --on-brand: #62446c;
  --brand-blush: #4a3656;
  --brand-sage: #c4a9cf;
  --brand-gold: #f4a477;
  --brand-gold-ink: #f4a477;
  --status-draft: var(--ink-muted);
  --status-review: var(--brand-gold-ink);
  --status-approved: #8fd0a6;
  --status-published: var(--brand-rose);
  --status-failed: #f59a88;
  --focus-ring: #ede4f3;
  --brand-prime: #62446c;
  --brand-on-prime: #fff8f0;
  --brand-light-prime: #ede4f3;
  --brand-accent: #f4a477;
  --brand-accent-soft: #4a3026;
  --status-info: #a9c6ea;
  --status-approved-surface: #1e3328;
  --status-failed-surface: #3d1c22;
  --status-review-surface: #3a2c12;
  --status-info-surface: #1c2b3d;
  --illu-lavender: #cdb9e0;
  --illu-rose: #f2bdb8;
  --illu-peach: #f9d0b4;
  --illu-sun: #f5d78e;
  --illu-sage: #bcd1b3;
  --illu-sea: #a9cdd6;
  --illu-sky: #c6d8ef;
  --illu-sand: #eadbc6;
  --shadow-raised: 0 2px 8px -2px rgba(0,0,0,0.6);
  --shadow-card: 0 18px 40px -20px rgba(0,0,0,0.7);
  --shadow-reveal: 0 36px 70px -28px rgba(0,0,0,0.75);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -16px rgba(0,0,0,0.7);
}

:root {
  --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;
  --space-16: 64px;
  --space-24: 96px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-card: 24px;
  --radius-sheet: 32px;
  --radius-card-frame: 18px;
  --radius-card-frame-inner: 14px;
  --radius-pill: 999px;
  --touch-ios: 44px;
  --touch-android: 48px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --card-max: 420px;
  --collection-thumb: 64px;
  --measure: 62ch;
  --export-canvas: 360px;
  --export-art-lg: 170px;
  --export-art-sm: 110px;
  --export-body-min: 16px;
  --export-picture-min: 216px;
  --export-preview: 252px;
  --export-preview-large: 180px;
  --choice-stack-text: 22px;
  --card-back-inset: 14px;
  --card-back-frame-gap: 6px;
  --card-back-corner-spark: 7px;
  --card-back-padding: 44px;
  --card-back-frame: 1.5px;
  --card-back-frame-inner: 0.75px;
  --card-back-charge: 3px;
  --card-elevation-rest: 6px;
  --card-elevation-lift: 28px;
  --border-thin: 1px;
  --border-focus: 2px;
  --studio-sidebar: 240px;
  --studio-content-max: 1600px;
  --studio-summary: 280px;
  --studio-card-min: 180px;
  --studio-breakpoint-wide: 1280px;
  --studio-breakpoint-stack: 1024px;
  --studio-breakpoint-phone: 640px;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
  --type-display-xl-family: var(--font-display);
  --type-display-xl-size: 40px;
  --type-display-xl-line-height: 44px;
  --type-display-xl-weight: 600;
  --type-display-xl-tracking: -0.01em;
  --type-display-xl-variation: "opsz" 72, "WONK" 0, "SOFT" 50;
  --type-display-lg-family: var(--font-display);
  --type-display-lg-size: 32px;
  --type-display-lg-line-height: 38px;
  --type-display-lg-weight: 600;
  --type-display-lg-tracking: normal;
  --type-display-lg-variation: "opsz" 72, "WONK" 0, "SOFT" 50;
  --type-display-md-family: var(--font-display);
  --type-display-md-size: 26px;
  --type-display-md-line-height: 32px;
  --type-display-md-weight: 500;
  --type-display-md-tracking: normal;
  --type-display-md-variation: "opsz" 72, "WONK" 0, "SOFT" 50;
  --type-card-title-family: var(--font-display);
  --type-card-title-size: 28px;
  --type-card-title-line-height: 32px;
  --type-card-title-weight: 600;
  --type-card-title-tracking: 0.08em;
  --type-card-title-variation: "opsz" 36, "WONK" 0, "SOFT" 50;
  --type-card-body-family: var(--font-text);
  --type-card-body-size: 19px;
  --type-card-body-line-height: 30px;
  --type-card-body-weight: 400;
  --type-card-body-tracking: normal;
  --type-card-body-variation: normal;
  --type-card-prompt-family: var(--font-display);
  --type-card-prompt-size: 18px;
  --type-card-prompt-line-height: 28px;
  --type-card-prompt-weight: 400;
  --type-card-prompt-tracking: normal;
  --type-card-prompt-variation: "opsz" 14, "WONK" 0, "SOFT" 50;
  --type-affirmation-family: var(--font-display);
  --type-affirmation-size: 32px;
  --type-affirmation-line-height: 38px;
  --type-affirmation-weight: 400;
  --type-affirmation-tracking: -0.01em;
  --type-affirmation-variation: "opsz" 36, "WONK" 0, "SOFT" 50;
  --type-title-family: var(--font-text);
  --type-title-size: 20px;
  --type-title-line-height: 26px;
  --type-title-weight: 600;
  --type-title-tracking: normal;
  --type-title-variation: normal;
  --type-subtitle-family: var(--font-text);
  --type-subtitle-size: 17px;
  --type-subtitle-line-height: 24px;
  --type-subtitle-weight: 500;
  --type-subtitle-tracking: normal;
  --type-subtitle-variation: normal;
  --type-body-lg-family: var(--font-text);
  --type-body-lg-size: 17px;
  --type-body-lg-line-height: 27px;
  --type-body-lg-weight: 400;
  --type-body-lg-tracking: normal;
  --type-body-lg-variation: normal;
  --type-body-family: var(--font-text);
  --type-body-size: 15px;
  --type-body-line-height: 23px;
  --type-body-weight: 400;
  --type-body-tracking: normal;
  --type-body-variation: normal;
  --type-body-sm-family: var(--font-text);
  --type-body-sm-size: 14px;
  --type-body-sm-line-height: 20px;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: normal;
  --type-body-sm-variation: normal;
  --type-label-family: var(--font-text);
  --type-label-size: 14px;
  --type-label-line-height: 18px;
  --type-label-weight: 500;
  --type-label-tracking: normal;
  --type-label-variation: normal;
  --type-button-family: var(--font-text);
  --type-button-size: 16px;
  --type-button-line-height: 20px;
  --type-button-weight: 600;
  --type-button-tracking: normal;
  --type-button-variation: normal;
  --type-meta-family: var(--font-mono);
  --type-meta-size: 12px;
  --type-meta-line-height: 16px;
  --type-meta-weight: 400;
  --type-meta-tracking: 0.1em;
  --type-meta-variation: normal;
  --type-meta-sm-family: var(--font-mono);
  --type-meta-sm-size: 11px;
  --type-meta-sm-line-height: 15px;
  --type-meta-sm-weight: 400;
  --type-meta-sm-tracking: 0.08em;
  --type-meta-sm-variation: normal;
  --motion-reveal: 360ms;
  --motion-reveal-settle: 180ms;
  --motion-feedback: 160ms;
  --motion-enter: 220ms;
  --motion-exit: 160ms;
  --ease-enter: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

.display-xl {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "WONK" 0, "SOFT" 50;
}

.display-lg {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  font-variation-settings: "opsz" 72, "WONK" 0, "SOFT" 50;
}

.display-md {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 32px;
  font-weight: 500;
  font-variation-settings: "opsz" 72, "WONK" 0, "SOFT" 50;
}

.card-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variation-settings: "opsz" 36, "WONK" 0, "SOFT" 50;
}

.card-body {
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
}

.card-prompt {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 14, "WONK" 0, "SOFT" 50;
}

.affirmation {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "WONK" 0, "SOFT" 50;
}

.title {
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}

.subtitle {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}

.body-lg {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
}

.body {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 23px;
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.label {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.button {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

.meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.meta-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
}