@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");

/* Vintage Paper — tweakcn preset "vintage-paper" */
:root {
  --background: #f5f1e6;
  --foreground: #4a3f35;
  --card: #fffcf5;
  --card-foreground: #4a3f35;
  --popover: #fffcf5;
  --popover-foreground: #4a3f35;
  --primary: #a67c52;
  --primary-foreground: #ffffff;
  --secondary: #e2d8c3;
  --secondary-foreground: #5c4d3f;
  --muted: #ece5d8;
  --muted-foreground: #7d6b56;
  --accent: #d4c8aa;
  --accent-foreground: #4a3f35;
  --destructive: #b54a35;
  --destructive-foreground: #ffffff;
  --border: #dbd0ba;
  --input: #dbd0ba;
  --ring: #a67c52;
  --chart-1: #a67c52;
  --chart-2: #8d6e4c;
  --chart-3: #735a3a;
  --chart-4: #b3906f;
  --chart-5: #c0a080;
  --sidebar: #ece5d8;
  --sidebar-foreground: #4a3f35;
  --sidebar-primary: #a67c52;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d4c8aa;
  --sidebar-accent-foreground: #4a3f35;
  --sidebar-border: #dbd0ba;
  --sidebar-ring: #a67c52;
  --radius: 0.25rem;
  --font-sans: Libre Baskerville, serif;
  --font-serif: Lora, serif;
  --font-mono: IBM Plex Mono, monospace;
  --shadow-color: hsl(28 13% 20%);
  --shadow-opacity: 0.12;
  --shadow-blur: 5px;
  --shadow-spread: 0px;
  --shadow-offset-x: 2px;
  --shadow-offset-y: 3px;
  --shadow-2xs: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 6%, transparent);
  --shadow-xs: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 6%, transparent);
  --shadow-sm: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 1px 2px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 1px 2px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-md: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 2px 4px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-lg: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 4px 6px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-xl: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 8px 10px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-2xl: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 30%, transparent);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: #2d2621;
  --foreground: #ece5d8;
  --card: #3a322c;
  --card-foreground: #ece5d8;
  --popover: #3a322c;
  --popover-foreground: #ece5d8;
  --primary: #c0a080;
  --primary-foreground: #2d2621;
  --secondary: #4a4039;
  --secondary-foreground: #ece5d8;
  --muted: #312b26;
  --muted-foreground: #c5bcac;
  --accent: #59493e;
  --accent-foreground: #ece5d8;
  --destructive: #b54a35;
  --destructive-foreground: #ffffff;
  --border: #4a4039;
  --input: #4a4039;
  --ring: #c0a080;
  --chart-1: #c0a080;
  --chart-2: #b3906f;
  --chart-3: #a67c52;
  --chart-4: #8d6e4c;
  --chart-5: #735a3a;
  --sidebar: #2d2621;
  --sidebar-foreground: #ece5d8;
  --sidebar-primary: #c0a080;
  --sidebar-primary-foreground: #2d2621;
  --sidebar-accent: #59493e;
  --sidebar-accent-foreground: #ece5d8;
  --sidebar-border: #4a4039;
  --sidebar-ring: #c0a080;
  --radius: 0.25rem;
  --font-sans: Libre Baskerville, serif;
  --font-serif: Lora, serif;
  --font-mono: IBM Plex Mono, monospace;
  --shadow-color: hsl(28 13% 20%);
  --shadow-opacity: 0.12;
  --shadow-blur: 5px;
  --shadow-spread: 0px;
  --shadow-offset-x: 2px;
  --shadow-offset-y: 3px;
  --shadow-2xs: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 6%, transparent);
  --shadow-xs: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 6%, transparent);
  --shadow-sm: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 1px 2px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 1px 2px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-md: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 2px 4px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-lg: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 4px 6px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-xl: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent), 2px 8px 10px -1px color-mix(in srgb, hsl(28 13% 20%) 12%, transparent);
  --shadow-2xl: 2px 3px 5px 0px color-mix(in srgb, hsl(28 13% 20%) 30%, transparent);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

/* PremiumCMS color-scheme base layer (zero-specificity; your own styles win) */
:where(html) { background: var(--background); color: var(--foreground); }
:where(body) { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); letter-spacing: var(--tracking-normal); line-height: 1.6; -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, h4, h5, h6) { color: var(--foreground); font-family: var(--font-sans); line-height: 1.2; }
:where(p, li) { max-width: 70ch; }
:where(a) { color: var(--primary); text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); text-underline-offset: 0.15em; }
:where(a:hover) { text-decoration-color: var(--primary); }
:where(::selection) { background: var(--primary); color: var(--primary-foreground); }
:where(header) { background: var(--card); color: var(--card-foreground); border-bottom: 1px solid var(--border); }
:where(footer) { background: var(--card); color: var(--muted-foreground); border-top: 1px solid var(--border); }
:where(nav a) { color: var(--foreground); text-decoration: none; }
:where(nav a:hover, nav a[aria-current]) { color: var(--primary); }
:where(button:not(.theme-btn):not([class*="icon"]), input[type="submit"], input[type="button"], .button, .btn, [role="button"]) { background: var(--primary); color: var(--primary-foreground); border: 1px solid transparent; border-radius: var(--radius); padding: 0.6rem 1rem; font: inherit; font-weight: 500; line-height: 1.2; cursor: pointer; box-shadow: var(--shadow-xs); }
:where(button:not(.theme-btn):not([class*="icon"]), input[type="submit"], input[type="button"], .button, .btn, [role="button"]):hover { opacity: 0.92; }
:where(.secondary, button.secondary, .btn-secondary) { background: var(--secondary); color: var(--secondary-foreground); }
:where(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { background: var(--background); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius); padding: 0.6rem 0.75rem; font: inherit; }
:where(input, textarea, select)::placeholder { color: var(--muted-foreground); }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
:where(hr) { border: 0; border-top: 1px solid var(--border); }
:where(small, .muted, time) { color: var(--muted-foreground); }
:where(mark) { background: var(--accent); color: var(--accent-foreground); border-radius: calc(var(--radius) - 2px); padding: 0 0.2em; }
:where(code, kbd, samp) { font-family: var(--font-mono); background: var(--muted); color: var(--foreground); border-radius: calc(var(--radius) - 2px); padding: 0.1em 0.35em; font-size: 0.9em; }
:where(pre) { font-family: var(--font-mono); background: var(--muted); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow: auto; }
:where(pre code) { background: none; padding: 0; font-size: inherit; }
:where(blockquote) { margin: 1.5rem 0; padding: 0.5rem 1.25rem; border-inline-start: 3px solid var(--primary); background: var(--muted); color: var(--muted-foreground); border-radius: 0 var(--radius) var(--radius) 0; }
:where(table) { border-collapse: collapse; width: 100%; }
:where(th, td) { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: start; }
:where(th) { background: var(--muted); color: var(--foreground); }
:where(img, video) { max-width: 100%; height: auto; border-radius: var(--radius); }
:where(.card, .ec-card, article.card) { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
:where(.ec-form-input, .ec-form-page select) { border-color: var(--input); border-radius: var(--radius); background: var(--background); color: var(--foreground); }
:where(.ec-form button[type="submit"]) { background: var(--primary); color: var(--primary-foreground); }


/* starter-theme bridge */
:root, .dark {
	--color-bg: var(--background);
	--color-bg-subtle: var(--muted);
	--color-surface: var(--card);
	--color-text: var(--foreground);
	--color-text-secondary: var(--muted-foreground);
	--color-muted: var(--muted-foreground);
	--color-border: var(--border);
	--color-border-subtle: var(--border);
	--color-brand: var(--primary);
	--color-brand-hover: var(--primary);
	--color-brand-ring: var(--ring);
	--color-on-brand: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-on-secondary: var(--secondary-foreground);
	--color-accent: var(--accent);
	--color-on-accent: var(--accent-foreground);
	--color-card: var(--card);
	--color-on-card: var(--card-foreground);
	--color-input: var(--input);
	--color-danger: var(--destructive);
	--radius: var(--radius, 0.375rem);
	--shadow-card: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.06));
	--font-body: var(--font-sans);
	--font-heading: var(--font-sans);
	--font-mono: var(--font-mono, ui-monospace, monospace);
}
/* Scheme-aware defaults for the storefront's generic controls; pages can override. */
:root { --btn-radius: var(--radius, 6px); }