:root {
  color-scheme: light;
  --cp-bg: #f7f4ef;
  --cp-bg-elevated: #fcfbf8;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f5f5f5;
  --cp-border: #dedede;
  --cp-border-strong: #919191;
  --cp-text: #242424;
  --cp-text-muted: #5c5c5c;
  --cp-text-soft: #6f6f6f;
  --cp-accent: #b11f4b;
  --cp-accent-hover: #9a1a41;
  --cp-accent-soft: rgba(177, 31, 75, 0.08);
  --cp-accent-fg: #ffffff;
  --cp-success: #16a34a;
  --cp-danger: #dc2626;
  --cp-warning: #f59e0b;
  --cp-link: #0078d4;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  --cp-overlay: rgba(255, 255, 255, 0.8);
  --cp-panel: rgba(255, 255, 255, 0.86);
  --cp-panel-strong: rgba(255, 255, 255, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.55);
  --cp-highlight: rgba(177, 31, 75, 0.12);
}
:root {
  --cp-coffee-bg: color-mix(in srgb, var(--cp-bg) 94%, var(--cp-warning));
  --cp-coffee-surface: color-mix(in srgb, var(--cp-surface) 97%, var(--cp-warning));
  --cp-clay: color-mix(in srgb, var(--cp-accent) 65%, var(--cp-warning));
  --cp-clay-strong: color-mix(in srgb, var(--cp-clay) 82%, var(--cp-text));
  --cp-clay-soft: color-mix(in srgb, var(--cp-clay-strong) 9%, var(--cp-surface));
  --cp-readable-muted: color-mix(in srgb, var(--cp-text-muted) 40%, var(--cp-text));
  --cp-transparent: color-mix(in srgb, var(--cp-surface) 0%, transparent);
  --cp-line-shadow: 0 2px 4px color-mix(in srgb, var(--cp-text) 8%, transparent);
}