/* Generated by scripts/build-business-card-themes.mjs. */
:root {
  --card-ref-page: #f3f4f5;
  --card-ref-surface: #ffffff;
  --card-ref-text: #202326;
  --card-ref-muted: #60676d;
  --card-ref-border: #d1d6da;
  --card-ref-control-border: #858d94;
  --card-ref-subtle: #e9ecee;
  --card-ref-danger: #a1392d;
  --card-ref-danger-hover: #852d23;
  --card-ref-danger-tint: #fff0eb;
  --card-page: var(--card-ref-page);
  --card-surface: var(--card-ref-surface);
  --card-text: var(--card-ref-text);
  --card-muted: var(--card-ref-muted);
  --card-border: var(--card-ref-border);
  --card-control-border: var(--card-ref-control-border);
  --card-subtle: var(--card-ref-subtle);
  --card-danger: var(--card-ref-danger);
  --card-danger-hover: var(--card-ref-danger-hover);
  --card-danger-tint: var(--card-ref-danger-tint);
}
#card-app, #viewer-app, #card-face {
  --card-ref-brand-50: #edf0f2;
  --card-ref-brand-100: #e0e5e8;
  --card-ref-brand-600: #30363b;
  --card-ref-brand-700: #1b2024;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=graphite]::before { background: #30363b; }
#card-face[data-card-style=clean], #card-app:has(#card-face[data-card-style=clean]), #viewer-app:has(#card-face[data-card-style=clean]) {
  --card-ref-brand-50: #ebf1f6;
  --card-ref-brand-100: #dce6ef;
  --card-ref-brand-600: #244d70;
  --card-ref-brand-700: #16334d;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=clean]::before { background: #244d70; }
#card-face[data-card-style=classic], #card-app:has(#card-face[data-card-style=classic]), #viewer-app:has(#card-face[data-card-style=classic]) {
  --card-ref-brand-50: #eaf2ef;
  --card-ref-brand-100: #dceae5;
  --card-ref-brand-600: #226158;
  --card-ref-brand-700: #153f39;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=classic]::before { background: #226158; }
#card-face[data-card-style=warm], #card-app:has(#card-face[data-card-style=warm]), #viewer-app:has(#card-face[data-card-style=warm]) {
  --card-ref-brand-50: #f5edef;
  --card-ref-brand-100: #ecdee3;
  --card-ref-brand-600: #794657;
  --card-ref-brand-700: #542d3a;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=warm]::before { background: #794657; }
#card-face[data-card-style=terracotta], #card-app:has(#card-face[data-card-style=terracotta]), #viewer-app:has(#card-face[data-card-style=terracotta]) {
  --card-ref-brand-50: #f7eeea;
  --card-ref-brand-100: #efdfd7;
  --card-ref-brand-600: #965037;
  --card-ref-brand-700: #6c3524;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=terracotta]::before { background: #965037; }
#card-face[data-card-style=cocoa], #card-app:has(#card-face[data-card-style=cocoa]), #viewer-app:has(#card-face[data-card-style=cocoa]) {
  --card-ref-brand-50: #f3eeea;
  --card-ref-brand-100: #e8ded5;
  --card-ref-brand-600: #6d503d;
  --card-ref-brand-700: #493425;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=cocoa]::before { background: #6d503d; }
#card-face[data-card-style=olive], #card-app:has(#card-face[data-card-style=olive]), #viewer-app:has(#card-face[data-card-style=olive]) {
  --card-ref-brand-50: #f0f2e8;
  --card-ref-brand-100: #e3e7d4;
  --card-ref-brand-600: #586333;
  --card-ref-brand-700: #39421e;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=olive]::before { background: #586333; }
#card-face[data-card-style=peacock], #card-app:has(#card-face[data-card-style=peacock]), #viewer-app:has(#card-face[data-card-style=peacock]) {
  --card-ref-brand-50: #e9f2f4;
  --card-ref-brand-100: #d7e8ec;
  --card-ref-brand-600: #096776;
  --card-ref-brand-700: #064652;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=peacock]::before { background: #096776; }
#card-face[data-card-style=iris], #card-app:has(#card-face[data-card-style=iris]), #viewer-app:has(#card-face[data-card-style=iris]) {
  --card-ref-brand-50: #f1edf6;
  --card-ref-brand-100: #e5dded;
  --card-ref-brand-600: #675184;
  --card-ref-brand-700: #46355e;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=iris]::before { background: #675184; }
#card-face[data-card-style=ochre], #card-app:has(#card-face[data-card-style=ochre]), #viewer-app:has(#card-face[data-card-style=ochre]) {
  --card-ref-brand-50: #f6f1e5;
  --card-ref-brand-100: #ece1c9;
  --card-ref-brand-600: #85621d;
  --card-ref-brand-700: #5b4110;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=ochre]::before { background: #85621d; }
#card-face[data-card-style=rose], #card-app:has(#card-face[data-card-style=rose]), #viewer-app:has(#card-face[data-card-style=rose]) {
  --card-ref-brand-50: #f9ecef;
  --card-ref-brand-100: #f4e1e6;
  --card-ref-brand-600: #a83e55;
  --card-ref-brand-700: #7a293b;
  --card-ref-brand-650: color-mix(in oklch, var(--card-ref-brand-600) 50%, var(--card-ref-brand-700));
  --card-ref-highlight: #f2c14e;
  --card-primary: var(--card-ref-brand-600);
  --card-on-primary: var(--card-surface);
  --card-primary-hover: var(--card-ref-brand-700);
  --card-primary-soft: var(--card-ref-brand-50);
  --card-primary-soft-hover: var(--card-ref-brand-100);
  --card-highlight: var(--card-ref-highlight);
  --card-ink: var(--card-primary);
  --card-action-hover: var(--card-primary-hover);
  --card-link-hover: var(--card-primary-hover);
  --card-paper: var(--card-surface);
  --card-tint: var(--card-primary-soft);
  --card-tint-hover: var(--card-primary-soft-hover);
  --card-cover: var(--card-primary);
}
#style-options [data-swatch=rose]::before { background: #a83e55; }
#card-face[data-card-style=custom], #card-app:has(#card-face[data-card-style=custom]), #viewer-app:has(#card-face[data-card-style=custom]) { --card-primary: #30363b; }