/* ===========================================================
   My Strand — base layer
   Design tokens (:root), reset, global element defaults,
   page-transition globals. Linked first on every page.
   =========================================================== */

/* Smooth cross-page fade on navigation (progressive enhancement;
   ignored by browsers without cross-document View Transitions). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

:root {
  --white: #FFFFFF;

  --bg-primary: #F7F3EB;
  --bg-card: var(--white);
  --bg-subtle: #EFE8DC;
  --bg-dark: #1E1714;
  --bg-input: var(--white);
  /* --bg-primary at 95% — frosted sticky header + hero glass box */
  --bg-frosted: rgba(247, 243, 235, 0.95);

  --text-main: #231B15;
  --text-muted: #6E6157;
  --text-light: #F9F6F0;

  --accent-leather: #8C4E28;
  --accent-leather-hover: #733D1C;
  --accent-brass: #C29B38;
  --border-color: #E2D7C8;

  --badge-instock: #386641;
  --badge-order: #9C5821;

  --font-serif: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-subtle: 0 4px 20px rgba(35, 27, 21, 0.06);
  --shadow-hover: 0 12px 32px rgba(35, 27, 21, 0.12);
  --shadow-modal: 0 25px 60px rgba(18, 12, 9, 0.35);
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-sans); background-color: var(--bg-primary); color: var(--text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, select, input, textarea { font-family: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ===========================================================
   Theme system — light (default) + dark.
   Dark mode overrides the design tokens above; because every
   surface reads from these vars, most of the UI flips for free.
   `data-theme` is set on <html> before first paint (inline
   script in each page <head>) so there is no flash.
   =========================================================== */
:root {
  color-scheme: light;
  /* Tokens for values that used to be hardcoded (so both themes stay clean) */
  --border-input: #B8A898;
  --text-placeholder: #8C7F73;
  --thumb-grad-a: #F5EDE3;
  --thumb-grad-b: #E7DAC9;
  --shimmer: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #17110D;   /* deep warm near-black */
  --bg-card: #211812;      /* raised warm surface */
  --bg-subtle: #2A2019;    /* subtle panels / thumbs */
  --bg-dark: #0E0A08;      /* footer — darkest */
  --bg-input: #211812;
  --bg-frosted: rgba(23, 17, 13, 0.92);

  --text-main: #F1E9DE;    /* warm off-white */
  --text-muted: #AE9F90;   /* muted warm grey */
  --text-light: #F9F6F0;   /* text sitting on leather */

  --accent-leather: #CB8552;        /* brightened so it reads as text on dark */
  --accent-leather-hover: #DB9A66;
  --accent-brass: #D4B15A;
  --border-color: #3A2C22;

  --badge-instock: #3E7A4C;
  --badge-order: #A85E28;

  --border-input: #4A3A2D;
  --text-placeholder: #9A8B7C;
  --thumb-grad-a: #2A2019;
  --thumb-grad-b: #1C1510;
  --shimmer: rgba(255, 255, 255, 0.06);

  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.65);
}

/* On the brightened leather, light text loses contrast — use near-black instead */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .modal-close:hover { color: #1A130E; }

/* Page-specific light panels that don't read from tokens */
html[data-theme="dark"] .cat-thumb,
html[data-theme="dark"] .inquire-image-side { background: var(--bg-subtle); }