:root {
  --pg-font-display: "Sora", sans-serif;
  --pg-font-body: "Hanken Grotesk", sans-serif;
  --pg-font-label: "JetBrains Mono", monospace;
  --pg-size-display: 48px;
  --pg-size-headline: 32px;
  --pg-size-headline-mobile: 28px;
  --pg-size-body: 16px;
  --pg-size-label: 12px;
  --pg-molten-from: #FB0240;
  --pg-molten-to: #8B0000;
  --pg-gold-from: #FFD700;
  --pg-gold-to: #B8860B;
  --pg-accent-gold: #ffe16d;
  --pg-accent-teal: #6dd8ce;
  --pg-accent-red: #ff5260;
}

:root,
html.light {
  color-scheme: light;
  --pg-obsidian: #f6f1ee;
  --pg-background: #f6f1ee;
  --pg-surface: #fff8f6;
  --pg-on-surface: #2a181a;
  --pg-on-surface-variant: #7a4548;
  --pg-graphite: #efe6e3;
  --pg-surface-container: #fff1ee;
  --pg-surface-container-low: #fff8f6;
  --pg-surface-container-high: #f3e4e1;
  --pg-surface-container-lowest: #ffffff;
  --pg-surface-container-highest: #ead8d5;
  --pg-surface-bright: #ffffff;
  --pg-primary: #bf002e;
  --pg-on-primary: #ffffff;
  --pg-on-primary-container: #5b0011;
  --pg-secondary: #6b4a00;
  --pg-primary-fixed: #920021;
  --pg-inverse-primary: #ffb3b3;
  --pg-tertiary-container: #006a64;
  --pg-glass-stroke: rgba(80, 30, 34, 0.14);
  --pg-glass: rgba(255, 248, 246, 0.72);
  --pg-glass-strong: rgba(255, 248, 246, 0.9);
  --pg-blob: rgba(251, 2, 64, 0.1);
  --pg-control-border: rgba(42, 24, 26, 0.14);
  --pg-menu-bg: rgba(255, 248, 246, 0.96);
  --pg-outline: #8a6a6a;
  --pg-outline-variant: #ead8d5;
  --pg-accent-border: #4a2e00;
  --pg-error: #ba1a1a;
  --pg-error-container: #ffdad6;
  --pg-on-error: #ffffff;
}

html.dark {
  color-scheme: dark;
  --pg-obsidian: #0a0a0b;
  --pg-background: #131314;
  --pg-surface: #131314;
  --pg-on-surface: #e5e2e3;
  --pg-on-surface-variant: #e8bcbb;
  --pg-graphite: #1f1f1f;
  --pg-surface-container: #201f20;
  --pg-surface-container-low: #1c1b1c;
  --pg-surface-container-high: #2a2a2b;
  --pg-surface-container-lowest: #0e0e0f;
  --pg-surface-container-highest: #353436;
  --pg-surface-bright: #3a393a;
  --pg-primary: #ffb3b3;
  --pg-on-primary: #680014;
  --pg-on-primary-container: #5b0011;
  --pg-secondary: #fff9ef;
  --pg-primary-fixed: #ffdad9;
  --pg-inverse-primary: #bf002e;
  --pg-tertiary-container: #2ca198;
  --pg-glass-stroke: rgba(255, 255, 255, 0.15);
  --pg-glass: rgba(32, 31, 32, 0.55);
  --pg-glass-strong: rgba(32, 31, 32, 0.8);
  --pg-blob: rgba(251, 2, 64, 0.15);
  --pg-control-border: rgba(255, 255, 255, 0.15);
  --pg-menu-bg: rgba(28, 27, 28, 0.95);
  --pg-outline: #af8786;
  --pg-outline-variant: #5e3e3e;
  --pg-accent-border: #00000000;
  --pg-error: #ffb4ab;
  --pg-error-container: #93000a;
  --pg-on-error: #690005;
}

html,
body {
  background-color: var(--pg-obsidian);
  color: var(--pg-on-surface);
  font-family: var(--pg-font-body);
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.light body {
  background-image: radial-gradient(circle at 50% 0%, var(--pg-blob) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--pg-gold-to) 12%, transparent) 0%, transparent 40%);
}

html.light .liquid-glass,
html.light .glass-panel,
html.light .glass {
  background: var(--pg-glass);
  border-color: var(--pg-glass-stroke);
  box-shadow: 0 10px 30px rgba(80, 20, 30, 0.08), inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}

html.light .menu-card:hover {
  background: var(--pg-glass-strong);
  box-shadow: 0 16px 36px rgba(80, 20, 30, 0.12);
}

html.light .tab-inactive,
html.light .tab-off {
  background: rgba(42, 24, 26, 0.04);
  color: var(--pg-on-surface-variant);
}

.fluid-bg {
  background: linear-gradient(-45deg, var(--pg-obsidian), var(--pg-surface-container-low), var(--pg-surface-container-high), var(--pg-background));
}

html.light .input-well,
input.input-well,
select.input-well {
  color: var(--pg-on-surface);
}

html.light .input-well {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--pg-control-border);
  color: var(--pg-on-surface);
}

html.light [data-lang-toggle],
html.light [data-theme-toggle] {
  border-color: var(--pg-control-border);
  color: var(--pg-on-surface);
}

html.light [data-lang-menu] {
  background: var(--pg-menu-bg);
  border-color: var(--pg-control-border);
}

html.light .border-white\/10,
html.light .border-glass-stroke {
  border-color: var(--pg-glass-stroke);
}

[data-theme-toggle],
[data-lang-toggle] {
  border: 1px solid var(--pg-control-border);
}

.pg-photo-box {
  position: relative;
}

.pg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.pg-photo-frame {
  background-color: var(--pg-surface-container-low);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

select {
  color: var(--pg-on-surface);
  background-color: var(--pg-surface-container);
}

select option,
select optgroup {
  color: #1a1a1a;
  background-color: #fff;
}

.font-display,
.font-display-lg,
.font-headline-lg,
.font-headline-lg-mobile {
  font-family: var(--pg-font-display) !important;
}

.font-body,
.font-body-md {
  font-family: var(--pg-font-body) !important;
}

.font-label-sm,
.font-mono {
  font-family: var(--pg-font-label) !important;
}

.text-display-lg { font-size: var(--pg-size-display) !important; }
.text-headline-lg { font-size: var(--pg-size-headline) !important; }
.text-headline-lg-mobile { font-size: var(--pg-size-headline-mobile) !important; }
.text-body-md { font-size: var(--pg-size-body) !important; }
.text-label-sm { font-size: var(--pg-size-label) !important; }

.molten,
.bg-molten-red {
  background: linear-gradient(180deg, var(--pg-molten-from) 0%, var(--pg-molten-to) 100%);
}

.bg-liquid-gold,
.text-gradient-gold {
  background-image: linear-gradient(135deg, var(--pg-gold-from) 0%, var(--pg-gold-to) 100%);
}

.text-secondary-fixed { color: var(--pg-accent-gold) !important; }
.pg-price {
  color: var(--pg-accent-gold);
  -webkit-text-stroke: 0.06em var(--pg-accent-border);
  paint-order: stroke fill;
  text-shadow:
    -1px 0 0 var(--pg-accent-border),
    1px 0 0 var(--pg-accent-border),
    0 -1px 0 var(--pg-accent-border),
    0 1px 0 var(--pg-accent-border),
    -1px -1px 0 var(--pg-accent-border),
    1px -1px 0 var(--pg-accent-border),
    -1px 1px 0 var(--pg-accent-border),
    1px 1px 0 var(--pg-accent-border);
}
.text-tertiary { color: var(--pg-accent-teal) !important; }
.bg-primary-container { background-color: var(--pg-accent-red) !important; }
.text-on-primary { color: var(--pg-on-primary) !important; }
.text-on-primary-container { color: var(--pg-on-primary-container) !important; }
.text-secondary { color: var(--pg-secondary) !important; }
.text-primary-fixed { color: var(--pg-primary-fixed) !important; }
.bg-tertiary-container { background-color: var(--pg-tertiary-container) !important; }
.text-error { color: var(--pg-error) !important; }
.bg-error-container { background-color: var(--pg-error-container) !important; }
.text-on-error { color: var(--pg-on-error) !important; }
.border-outline { border-color: var(--pg-outline) !important; }

html.light.pg-stroke-light-all :is(body, p, h1, h2, h3, h4, h5, h6, a, span, li, label, button, input, textarea, select, strong, em, small, td, th, div, option),
html.dark.pg-stroke-dark-all :is(body, p, h1, h2, h3, h4, h5, h6, a, span, li, label, button, input, textarea, select, strong, em, small, td, th, div, option),
.theme-preview-scope.pg-stroke-all :is(p, h1, h2, h3, h4, span, label, strong, div, input) {
  -webkit-text-stroke: 0.045em var(--pg-accent-border);
  paint-order: stroke fill;
}

html.light.pg-stroke-light-all .material-symbols-outlined,
html.dark.pg-stroke-dark-all .material-symbols-outlined,
.theme-preview-scope.pg-stroke-all .material-symbols-outlined {
  -webkit-text-stroke: 0;
  text-shadow: none;
}