:root {
  --navy: #0d1b2a;
  --navy-deep: #08121c;
  --navy-mid: #1b3147;
  --orange: #f26c21;
  --orange-hot: #ff7a2e;
  --paper: #f6f4f0;
  --mist: #e6e8eb;
  --tan: #c9bb9a;
  --ink: #121820;
  --muted: #5c6773;
  --line: #d5d2cb;
  --card: #ffffff;
  --shadow-border: 0px 0px 0px 1px rgba(13, 27, 42, 0.06), 0px 1px 2px -1px rgba(13, 27, 42, 0.06), 0px 2px 4px 0px rgba(13, 27, 42, 0.04);
  --shadow-lift: 0px 0px 0px 1px rgba(13, 27, 42, 0.08), 0px 10px 28px -12px rgba(13, 27, 42, 0.22);
}

html { background: var(--paper); color: var(--ink); }
body { font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; min-height: 100dvh; }
h1, h2, h3, h4 { font-family: "Oswald", "Arial Narrow", sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }
img.product-photo { outline: 1px solid rgba(13, 27, 42, 0.08); outline-offset: -1px; }
.shadow-border { box-shadow: var(--shadow-border); }
.shadow-lift { box-shadow: var(--shadow-lift); }
.font-display { font-family: "Oswald", "Arial Narrow", sans-serif; }
input, select, textarea { font-family: inherit; }

.flash { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; max-width: 22rem; }
.flash-item { background: #0d1b2a; color: #f6f4f0; padding: 0.85rem 1rem; border-radius: 12px; margin-top: 0.5rem; font-size: 0.9rem; box-shadow: var(--shadow-lift); }
.flash-item.error { background: #b42318; }