/* Shared design tokens for the shop and the admin panel.
   One neutral family (zinc), one accent chosen in Admin > Website (html[data-accent]). */
:root {
  --font: 'Onest Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #ebebee;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --text: #18181b;
  --muted: #5f5f68;
  --faint: #a1a1aa;

  --ok: #15803d;
  --ok-soft: #e7f5ec;
  --warn: #a16207;
  --warn-soft: #fdf4dc;
  --bad: #b91c1c;
  --bad-soft: #fdecec;

  --accent: #c2410c;
  --accent-ink: #ffffff;
  --accent-text: #c2410c;
  --accent-soft: color-mix(in oklab, var(--accent) 10%, var(--surface));

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgb(24 24 27 / 6%);
  --shadow-md: 0 1px 2px rgb(24 24 27 / 5%), 0 8px 24px -8px rgb(24 24 27 / 12%);
  --shadow-lg: 0 24px 64px -16px rgb(24 24 27 / 28%);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --z-sticky: 10;
  --z-bar: 20;
  --z-toast: 40;
  color-scheme: light;
}

html[data-accent="forest"] { --accent: #25704f; --accent-text: #25704f; }
html[data-accent="cobalt"] { --accent: #2b55c7; --accent-text: #2b55c7; }
html[data-accent="plum"] { --accent: #87407a; --accent-text: #87407a; }
html[data-accent="graphite"] { --accent: #27272a; --accent-text: #27272a; }
html[data-accent="saffron"] { --accent: #f0b429; --accent-ink: #241a00; --accent-text: #8a5a00; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e10;
    --surface: #151518;
    --surface-2: #1c1c20;
    --surface-3: #26262b;
    --line: #2a2a30;
    --line-strong: #3a3a41;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --faint: #63636b;
    --ok: #4ade80;
    --ok-soft: #10261a;
    --warn: #facc15;
    --warn-soft: #2a230c;
    --bad: #f87171;
    --bad-soft: #2c1414;
    --accent: #fb7c45;
    --accent-ink: #1c0a02;
    --accent-text: #fb7c45;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -8px rgb(0 0 0 / 60%);
    --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
  html[data-accent="forest"] { --accent: #5cc493; --accent-ink: #03170d; --accent-text: #5cc493; }
  html[data-accent="cobalt"] { --accent: #7fa0ff; --accent-ink: #050d26; --accent-text: #7fa0ff; }
  html[data-accent="plum"] { --accent: #de95cf; --accent-ink: #24071d; --accent-text: #de95cf; }
  html[data-accent="graphite"] { --accent: #f4f4f5; --accent-ink: #18181b; --accent-text: #f4f4f5; }
  html[data-accent="saffron"] { --accent: #f5c451; --accent-ink: #241a00; --accent-text: #f5c451; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: var(--z-toast);
  background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Icons: Phosphor web font */
.ph, .ph-fill { font-size: 1.15em; line-height: 1; vertical-align: -0.15em; }

/* Language switch, shared */
.lang-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border-radius: 999px;
}
.lang-switch button {
  border: 0; background: transparent; cursor: pointer;
  min-width: 40px; height: 30px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 550; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0, var(--surface-3) 120px, var(--surface-2) 240px) var(--surface-2);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}