/*! Shelf design system 1.0.0 (2026-11-07). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. Accent presets switch with
   data-accent="teal" or data-accent="ink" on <html>; they only touch accent and button tokens. */

:root {
  color-scheme: light;

  /* Surfaces: cream canvas, warm white cards, a deeper bay where covers stand */
  --sh-canvas: #f5eee2;
  --sh-surface: #fffbf5;
  --sh-well: #f2e8d8;
  --sh-bay: #ece1ce;

  /* Text: espresso ink */
  --sh-ink: #2a1c13;
  --sh-body: #3e2d21;
  --sh-muted: #544032;

  /* Lines */
  --sh-hair: #e3d6c0;
  --sh-hair-strong: #cdbb9e;
  --sh-control: #8a725c;

  /* The shelf: plank line, its top lip, the shade under it, the contact shadow under objects */
  --sh-plank: #5a4130;
  --sh-plank-lip: #8b6c52;
  --sh-plank-top: #ddcbac;
  --sh-plank-shade: rgba(42, 28, 19, 0.2);
  --sh-contact: rgba(42, 28, 19, 0.36);

  /* Accent: tomato. Fills, selected marks, links and focus */
  --sh-accent: #c4391f;
  --sh-accent-strong: #8f2813;
  --sh-accent-soft: #fceae2;
  --sh-accent-ink: #fff8f0;

  /* Buy button (the primary action) */
  --sh-buy: #c4391f;
  --sh-buy-hover: #a62f18;
  --sh-buy-ink: #fff8f0;

  /* Focus ring */
  --sh-focus: #8f2813;

  /* Sale marks stay tomato under every accent preset */
  --sh-sale: #a92f19;
  --sh-sale-soft: #fbe0d6;

  /* Status: sage for included and success */
  --sh-ok: #335d38;
  --sh-ok-soft: #e2ebda;
  --sh-sage: #7f9a74;
  --sh-warn: #7a4d00;
  --sh-warn-soft: #f7e9cd;
  --sh-danger: #a3222b;
  --sh-danger-soft: #fae2e1;
  --sh-info: #2e4f73;
  --sh-info-soft: #e3eaf2;

  /* Inverted chips: tooltips and toasts */
  --sh-invert: #2a1c13;
  --sh-invert-ink: #f8efdf;
  --sh-invert-muted: #ddcdb7;

  /* Backdrop behind the cart drawer and dialogs */
  --sh-scrim: rgba(42, 28, 19, 0.44);

  /* Paper: template sheets and specimen cards */
  --sh-paper: #fffdf8;
  --sh-paper-ink: #2a1c13;
  --sh-paper-line: #dccfb8;

  /* Cover colors: six curated fills, each with its own label color */
  --sh-cover-1: #8fa684;
  --sh-cover-1-ink: #1c2a17;
  --sh-cover-2: #e0a845;
  --sh-cover-2-ink: #2b1b06;
  --sh-cover-3: #2e4f73;
  --sh-cover-3-ink: #f7efe2;
  --sh-cover-4: #d98a6c;
  --sh-cover-4-ink: #2a130a;
  --sh-cover-5: #2f6e6a;
  --sh-cover-5-ink: #f4f1e6;
  --sh-cover-6: #ebdfc6;
  --sh-cover-6-ink: #2a1c13;
  --sh-cover-shade: rgba(26, 16, 10, 0.22);
  --sh-cover-light: rgba(255, 255, 255, 0.24);
  --sh-cover-edge: rgba(42, 28, 19, 0.16);

  /* Data viz: categorical (3:1 on surface and canvas, neighbors differ in lightness) */
  --sh-viz-1: #1f4a75;
  --sh-viz-2: #a3303c;
  --sh-viz-3: #3990b4;
  --sh-viz-4: #d06a1f;
  --sh-viz-5: #3d2516;
  --sh-viz-6: #4a7c35;
  /* Sequential ramp, low to high */
  --sh-seq-1: #dbe7ee;
  --sh-seq-2: #a9c6d8;
  --sh-seq-3: #6f9dbd;
  --sh-seq-4: #3c6e96;
  --sh-seq-5: #1f4a75;
  /* Diverging ramp, ochre to harbor blue through cream */
  --sh-div-1: #a3600f;
  --sh-div-2: #d9a35b;
  --sh-div-3: #ece1ce;
  --sh-div-4: #6f9dbd;
  --sh-div-5: #1f4a75;

  /* Elevation: cards stay flat; objects, drawers and popovers lift */
  --sh-shadow-object: 0 1px 0 rgba(42, 28, 19, 0.08), 0 14px 18px -14px rgba(42, 28, 19, 0.5);
  --sh-shadow-card: 0 1px 2px rgba(42, 28, 19, 0.06);
  --sh-shadow-lift: 0 2px 4px rgba(42, 28, 19, 0.06), 0 18px 32px -20px rgba(42, 28, 19, 0.38);
  --sh-shadow-pop: 0 2px 6px rgba(42, 28, 19, 0.1), 0 24px 56px -20px rgba(42, 28, 19, 0.45);

  /* Type */
  --sh-font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sh-font-serif: "Young Serif", ui-serif, serif;
  --sh-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --sh-fs-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);       /* 40 to 64: page title */
  --sh-fs-page: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);     /* 36 to 56: inner page title */
  --sh-fs-title: clamp(1.875rem, 1.45rem + 1.75vw, 2.75rem); /* 30 to 44: section title */
  --sh-fs-headline: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);     /* 24 to 32: big prices, panel titles */
  --sh-fs-card: 1.25rem;                                      /* 20: product and card titles */
  --sh-fs-lede: 1.1875rem;                                    /* 19: lede */
  --sh-fs-prose: 1.125rem;                                    /* 18: article prose */
  --sh-fs-body: 1.0625rem;                                    /* 17: body */
  --sh-fs-small: 1rem;                                        /* 16: card text, form text, dense prose */
  --sh-fs-meta: 0.875rem;                                     /* 14: meta, table, small buttons */
  --sh-fs-tag: 0.8125rem;                                     /* 13: tags and talkers */
  --sh-lh-display: 1.04;
  --sh-lh-title: 1.12;
  --sh-lh-snug: 1.3;
  --sh-lh-body: 1.6;
  --sh-track-display: -0.018em;
  --sh-track-title: -0.01em;
  --sh-track-tag: 0.01em;
  --sh-weight-regular: 400;
  --sh-weight-medium: 500;
  --sh-weight-semibold: 600;
  --sh-weight-bold: 700;

  /* Space: 4px base */
  --sh-space-1: 4px;
  --sh-space-2: 8px;
  --sh-space-3: 12px;
  --sh-space-4: 16px;
  --sh-space-5: 20px;
  --sh-space-6: 24px;
  --sh-space-7: 32px;
  --sh-space-8: 40px;
  --sh-space-9: 48px;
  --sh-space-10: 64px;
  --sh-space-11: 80px;
  --sh-space-12: 104px;

  /* Shape */
  --sh-radius-object: 3px;
  --sh-radius-object-lg: 4px;
  --sh-radius-sm: 6px;
  --sh-radius-btn: 10px;
  --sh-radius-input: 10px;
  --sh-radius-panel: 12px;
  --sh-radius-card: 16px;
  --sh-radius-pill: 999px;

  /* Layout */
  --sh-content: 1240px;
  --sh-narrow: 720px;
  --sh-gutter: 20px;
  --sh-section: 64px;
  --sh-nav-h: 68px;
  --sh-bay-h: 236px;
  --sh-plank-size: 3px;
  --sh-plank-depth: 10px;

  /* Motion */
  --sh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sh-dur-fast: 140ms;
  --sh-dur: 220ms;
  --sh-dur-slow: 360ms;
}

@media (min-width: 900px) {
  :root {
    --sh-gutter: 40px;
    --sh-section: 104px;
    --sh-bay-h: 260px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sh-canvas: #1b140f;
    --sh-surface: #241a13;
    --sh-well: #2a1f17;
    --sh-bay: #2d2219;
    --sh-ink: #f7eedf;
    --sh-body: #e6d7c3;
    --sh-muted: #c4ae96;
    --sh-hair: #3a2c21;
    --sh-hair-strong: #56432f;
    --sh-control: #8e765f;
    --sh-plank: #a07e60;
    --sh-plank-lip: #c9a684;
  --sh-plank-top: #3e2f23;
    --sh-plank-top: #3e2f23;
    --sh-plank-shade: rgba(0, 0, 0, 0.5);
    --sh-contact: rgba(0, 0, 0, 0.62);
    --sh-accent: #f06a4b;
    --sh-accent-strong: #ff9c82;
    --sh-accent-soft: #3b2018;
    --sh-accent-ink: #1b120c;
    --sh-buy: #f06a4b;
    --sh-buy-hover: #ff8a6e;
    --sh-buy-ink: #1b120c;
    --sh-focus: #ff9c82;
    --sh-sale: #ff9c82;
    --sh-sale-soft: #3d1d14;
    --sh-ok: #9dcb93;
    --sh-ok-soft: #1f2b1c;
    --sh-sage: #87a37b;
    --sh-warn: #efbf6a;
    --sh-warn-soft: #32260f;
    --sh-danger: #ff9d9d;
    --sh-danger-soft: #3a1b1d;
    --sh-info: #9cc6ee;
    --sh-info-soft: #1c2836;
    --sh-invert: #f7eedf;
    --sh-invert-ink: #1b140f;
    --sh-invert-muted: #4a3a2d;
    --sh-scrim: rgba(8, 5, 3, 0.66);
    --sh-paper: #e8dcc8;
    --sh-paper-ink: #2a1c13;
    --sh-paper-line: #c7b79c;
    --sh-cover-1: #89a27d;
    --sh-cover-1-ink: #162212;
    --sh-cover-2: #d8a03c;
    --sh-cover-2-ink: #221503;
    --sh-cover-3: #4b72a0;
    --sh-cover-3-ink: #fbf6ec;
    --sh-cover-4: #d4815f;
    --sh-cover-4-ink: #220e07;
    --sh-cover-5: #4a9690;
    --sh-cover-5-ink: #081615;
    --sh-cover-6: #d9cab0;
    --sh-cover-6-ink: #231710;
    --sh-cover-shade: rgba(10, 6, 3, 0.26);
    --sh-cover-light: rgba(255, 255, 255, 0.2);
    --sh-cover-edge: rgba(0, 0, 0, 0.3);
    --sh-viz-1: #9cc6ee;
    --sh-viz-2: #e0727c;
    --sh-viz-3: #3f97c4;
    --sh-viz-4: #ec9150;
    --sh-viz-5: #f3dcae;
    --sh-viz-6: #76b062;
    --sh-seq-1: #22313d;
    --sh-seq-2: #2f4d66;
    --sh-seq-3: #4a77a0;
    --sh-seq-4: #7aa8d4;
    --sh-seq-5: #b9d6f1;
    --sh-div-1: #e0a65a;
    --sh-div-2: #9c6a2c;
    --sh-div-3: #3a2e25;
    --sh-div-4: #3f6d96;
    --sh-div-5: #9cc6ee;
    --sh-shadow-object: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 18px -14px rgba(0, 0, 0, 0.8);
    --sh-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sh-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 32px -20px rgba(0, 0, 0, 0.75);
    --sh-shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sh-canvas: #1b140f;
  --sh-surface: #241a13;
  --sh-well: #2a1f17;
  --sh-bay: #2d2219;
  --sh-ink: #f7eedf;
  --sh-body: #e6d7c3;
  --sh-muted: #c4ae96;
  --sh-hair: #3a2c21;
  --sh-hair-strong: #56432f;
  --sh-control: #8e765f;
  --sh-plank: #a07e60;
  --sh-plank-lip: #c9a684;
  --sh-plank-shade: rgba(0, 0, 0, 0.5);
  --sh-contact: rgba(0, 0, 0, 0.62);
  --sh-accent: #f06a4b;
  --sh-accent-strong: #ff9c82;
  --sh-accent-soft: #3b2018;
  --sh-accent-ink: #1b120c;
  --sh-buy: #f06a4b;
  --sh-buy-hover: #ff8a6e;
  --sh-buy-ink: #1b120c;
  --sh-focus: #ff9c82;
  --sh-sale: #ff9c82;
  --sh-sale-soft: #3d1d14;
  --sh-ok: #9dcb93;
  --sh-ok-soft: #1f2b1c;
  --sh-sage: #87a37b;
  --sh-warn: #efbf6a;
  --sh-warn-soft: #32260f;
  --sh-danger: #ff9d9d;
  --sh-danger-soft: #3a1b1d;
  --sh-info: #9cc6ee;
  --sh-info-soft: #1c2836;
  --sh-invert: #f7eedf;
  --sh-invert-ink: #1b140f;
  --sh-invert-muted: #4a3a2d;
  --sh-scrim: rgba(8, 5, 3, 0.66);
  --sh-paper: #e8dcc8;
  --sh-paper-ink: #2a1c13;
  --sh-paper-line: #c7b79c;
  --sh-cover-1: #89a27d;
  --sh-cover-1-ink: #162212;
  --sh-cover-2: #d8a03c;
  --sh-cover-2-ink: #221503;
  --sh-cover-3: #4b72a0;
  --sh-cover-3-ink: #fbf6ec;
  --sh-cover-4: #d4815f;
  --sh-cover-4-ink: #220e07;
  --sh-cover-5: #4a9690;
  --sh-cover-5-ink: #081615;
  --sh-cover-6: #d9cab0;
  --sh-cover-6-ink: #231710;
  --sh-cover-shade: rgba(10, 6, 3, 0.26);
  --sh-cover-light: rgba(255, 255, 255, 0.2);
  --sh-cover-edge: rgba(0, 0, 0, 0.3);
  --sh-viz-1: #9cc6ee;
  --sh-viz-2: #e0727c;
  --sh-viz-3: #3f97c4;
  --sh-viz-4: #ec9150;
  --sh-viz-5: #f3dcae;
  --sh-viz-6: #76b062;
  --sh-seq-1: #22313d;
  --sh-seq-2: #2f4d66;
  --sh-seq-3: #4a77a0;
  --sh-seq-4: #7aa8d4;
  --sh-seq-5: #b9d6f1;
  --sh-div-1: #e0a65a;
  --sh-div-2: #9c6a2c;
  --sh-div-3: #3a2e25;
  --sh-div-4: #3f6d96;
  --sh-div-5: #9cc6ee;
  --sh-shadow-object: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 18px -14px rgba(0, 0, 0, 0.8);
  --sh-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 32px -20px rgba(0, 0, 0, 0.75);
  --sh-shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
}

/* Accent preset: teal. Buy buttons, links, selected marks and focus turn teal. */
:root[data-accent="teal"] {
  --sh-accent: #1f6b66;
  --sh-accent-strong: #175651;
  --sh-accent-soft: #e4f1ee;
  --sh-accent-ink: #fdfaf3;
  --sh-buy: #1f6b66;
  --sh-buy-hover: #175651;
  --sh-buy-ink: #fdfaf3;
  --sh-focus: #175651;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="teal"]:not([data-theme="light"]) {
    --sh-accent: #4fb3aa;
    --sh-accent-strong: #7fd0c6;
    --sh-accent-soft: #16302d;
    --sh-accent-ink: #0d1c1b;
    --sh-buy: #4fb3aa;
    --sh-buy-hover: #6cc7be;
    --sh-buy-ink: #0d1c1b;
    --sh-focus: #7fd0c6;
  }
}

:root[data-accent="teal"][data-theme="dark"] {
  --sh-accent: #4fb3aa;
  --sh-accent-strong: #7fd0c6;
  --sh-accent-soft: #16302d;
  --sh-accent-ink: #0d1c1b;
  --sh-buy: #4fb3aa;
  --sh-buy-hover: #6cc7be;
  --sh-buy-ink: #0d1c1b;
  --sh-focus: #7fd0c6;
}

/* Accent preset: ink. Near-black buy buttons with cream labels; links and marks in espresso. */
:root[data-accent="ink"] {
  --sh-accent: #2a1c13;
  --sh-accent-strong: #2a1c13;
  --sh-accent-soft: #ebe0cf;
  --sh-accent-ink: #f8efdf;
  --sh-buy: #2a1c13;
  --sh-buy-hover: #47331f;
  --sh-buy-ink: #f8efdf;
  --sh-focus: #2a1c13;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="ink"]:not([data-theme="light"]) {
    --sh-accent: #f2e6d2;
    --sh-accent-strong: #f7eedf;
    --sh-accent-soft: #3a2c22;
    --sh-accent-ink: #1b140f;
    --sh-buy: #f2e6d2;
    --sh-buy-hover: #fff8ec;
    --sh-buy-ink: #1b140f;
    --sh-focus: #f7eedf;
  }
}

:root[data-accent="ink"][data-theme="dark"] {
  --sh-accent: #f2e6d2;
  --sh-accent-strong: #f7eedf;
  --sh-accent-soft: #3a2c22;
  --sh-accent-ink: #1b140f;
  --sh-buy: #f2e6d2;
  --sh-buy-hover: #fff8ec;
  --sh-buy-ink: #1b140f;
  --sh-focus: #f7eedf;
}