/* ============================================================
   OUNIN GLOBAL — DESIGN TOKENS
   Source of truth: Design.md v2.3 (Hearth Clay · Radiant)
   Warm-White Layers + Morandi accents · 55% Sage / 30% Creator / 15% Everyman
   Migrated: 2026-07-27 (from v1.8 Botanical Forward)
   ============================================================ */

:root {
  /* -------------------------------------------------------
     COLOR — Surfaces (three stepped warm whites, v2.3)
     All three whites sit ABOVE the product's cream body
     (L*≈90) so the machine never sinks into the page.
     ------------------------------------------------------- */
  --ounin-bone:      #FBF8F1;  /* "linen" — page canvas, airy warm white */
  --ounin-paper:     #FFFEFB;  /* "cloud" — moon-white: cards, dialogs, product stage */
  --ounin-cream:     #F3EDDF;  /* "sand" — sunken zones, footer bg */
  --ounin-hero:      #33261E;  /* "hero-umber" — dark hero/footer ground (product lift) */

  /* COLOR — Morandi key accents (v2.1+, fired to terracotta v2.3) */
  --ounin-clay:       #C4622F;  /* orange terracotta — key accent */
  --ounin-blush-clay: #F2BE97;  /* peach-clay tint — pills, tint blocks */

  /* COLOR — Sage (demoted v2.1: small-area accent only, never body fill) */
  --ounin-sage:      #8C9480;  /* grey-sage accent */
  --ounin-sage-deep: #5F6B51;  /* eyebrow, active, focus */
  --ounin-sage-mist: #E7EAE0;  /* quiet green tint — indicator dots, tiny fills */

  /* COLOR — Ink + Text (warm near-black + golden russet) */
  --ounin-ink:       #26211B;  /* warm near-black — body text, primary CTA fill */
  --ounin-stone:     #84613F;  /* captions, meta — golden russet */
  --ounin-line:      #EAE1D0;  /* borders, dividers */

  /* COLOR — Creator warmth (carried over, use on purpose) */
  --ounin-cork:        #C19566;  /* Cork wood foot — featured warm */
  --ounin-copper-rose: #C97A5B;  /* Peach-coral accent — eyebrow on dark, badge accent */
  --ounin-oak:         #C19566;  /* Alias to cork for backward compat */

  /* COLOR — Forbidden in body UI (lockup only) */
  --ounin-orange-LOCKUP-ONLY: #FF6B3D;  /* Logo lockup ONLY */

  /* COLOR — Utility */
  --color-error:     #9A4438;
  --color-success:   var(--ounin-sage-deep);

  /* -------------------------------------------------------
     TYPOGRAPHY — Families
     Primary serif: GT Sectra (paid) → fallback EB Garamond
     Primary sans:  Inter
     ------------------------------------------------------- */
  --font-serif: "EB Garamond", "GT Sectra", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Monaco, Consolas, "Courier New", monospace;

  /* TYPOGRAPHY — Scale (mobile-first; desktop overrides in media query) */
  --type-hero-display: 2.625rem;  /* 42px mobile → 80px desktop */
  --type-h1:           2rem;       /* 32px → 56px */
  --type-h2:           1.5rem;     /* 24px → 40px */
  --type-h3:           1.25rem;    /* 20px → 28px */
  --type-h4:           1.0625rem;  /* 17px → 20px */
  --type-body:         1rem;       /* 16px stable */
  --type-small:        0.875rem;   /* 14px */
  --type-micro:        0.75rem;    /* 12px */
  --type-eyebrow:      0.75rem;    /* 12px uppercase tracked */
  --type-button:       0.9375rem;  /* 15px */

  /* TYPOGRAPHY — Line heights */
  --lh-display:        1.05;
  --lh-heading:        1.15;
  --lh-body:           1.55;
  --lh-tight:          1.25;

  /* TYPOGRAPHY — Letter spacing */
  --tracking-eyebrow:  0.18em;
  --tracking-button:   0.04em;
  --tracking-display:  -0.015em;

  /* -------------------------------------------------------
     SPACING — 8px base scale
     ------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* -------------------------------------------------------
     LAYOUT — Grids & containers
     ------------------------------------------------------- */
  --container-max:     1280px;
  --container-narrow:  920px;
  --container-prose:   620px;  /* 62ch */
  --gutter:            var(--space-5);

  /* -------------------------------------------------------
     RADIUS — Subtle, editorial
     ------------------------------------------------------- */
  --radius-none:  0;
  --radius-xs:    2px;     /* Checkboxes, micro elements */
  --radius-sm:    4px;     /* Cards, inputs, buttons */
  --radius-md:    8px;     /* Modals, dropdowns */
  --radius-pill:  9999px;  /* Pills, dots */

  /* -------------------------------------------------------
     ELEVATION — 5-step shadow scale (subtle, never glow)
     ------------------------------------------------------- */
  --elevation-0:  none;
  --elevation-1:  0 1px 2px rgba(30, 30, 30, 0.04);
  --elevation-2:  0 2px 8px rgba(30, 30, 30, 0.06), 0 1px 2px rgba(30, 30, 30, 0.04);
  --elevation-3:  0 8px 24px rgba(30, 30, 30, 0.08), 0 2px 4px rgba(30, 30, 30, 0.04);
  --elevation-4:  0 16px 48px rgba(30, 30, 30, 0.12), 0 4px 8px rgba(30, 30, 30, 0.06);

  /* -------------------------------------------------------
     MOTION — Timings & easings
     ------------------------------------------------------- */
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-slow:    400ms;
  --duration-page:    600ms;
  --ease-out:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphatic:    cubic-bezier(0.16, 1, 0.3, 1);

  /* -------------------------------------------------------
     Z-INDEX — Stacking
     ------------------------------------------------------- */
  --z-header:      100;
  --z-dropdown:    200;
  --z-drawer:      300;
  --z-modal:       400;
  --z-toast:       500;

  /* -------------------------------------------------------
     BREAKPOINTS (reference — used in media queries below)
     mobile: <=767, tablet: 768-1023, desktop: 1024+
     ------------------------------------------------------- */
}

/* Desktop type scale override */
@media (min-width: 1024px) {
  :root {
    --type-hero-display: 5rem;       /* 80px */
    --type-h1:           3.5rem;     /* 56px */
    --type-h2:           2.5rem;     /* 40px */
    --type-h3:           1.75rem;    /* 28px */
    --type-h4:           1.25rem;    /* 20px */
    --gutter:            var(--space-6);
    /* Guaranteed minimum page margin on desktop (Design.md v2.6 §6 Grid):
       content never sits closer than 64px to the viewport edge, so
       1280/1366-wide laptops keep breathing room. At ≥1408px viewport
       these resolve to the plain 1280px/920px caps — no change ≥1440. */
    --container-max:     min(1280px, calc(100vw - 128px));
    --container-narrow:  min(920px,  calc(100vw - 128px));
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    1ms;
    --duration-normal:  1ms;
    --duration-slow:    1ms;
    --duration-page:    1ms;
  }
}

/* ============================================================
   GLOBAL RESET — Minimal, opinionated
   ============================================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ounin-ink);
  background: var(--ounin-bone);
  font-feature-settings: "kern" 1, "liga" 1;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;                 /* v2.15: single editorial weight — no 400/500 pair */
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); font-family: var(--font-sans); font-weight: 400; letter-spacing: 0; }

p {
  margin: 0 0 var(--space-4) 0;
  max-width: var(--container-prose);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Tabular numerals for technical data */
.tabular,
.spec-value,
.price-value,
[data-tabular="true"] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.container       { max-width: var(--container-max);    margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-prose { max-width: var(--container-prose);  margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 400;                 /* v2.15: eyebrow whispers, not shouts */
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ounin-sage-deep);
}
/* Opt-in warm accent (peach-coral) — use on product family eyebrows, badges */
.eyebrow.eyebrow-warm,
.eyebrow-warm {
  color: var(--ounin-copper-rose);
}

.lede {
  font-size: var(--type-h4);
  line-height: var(--lh-body);
  color: var(--ounin-stone);
  max-width: var(--container-prose);
}

.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section spacing — v2.13 compacted: adjacent desktop sections stacked to
   160+160=320px of dead air (client: "全站大量大幅空白，应更紧凑");
   now 96/64 desktop, 64/48 mobile — still premium breathing room. */
.section {
  padding-block: var(--space-8);
}
.section-tight {
  padding-block: var(--space-7);
}
/* v2.14: anchor targets clear the sticky header (56px mobile / 72px desktop)
   so section eyebrows aren't clipped on jump. */
section[id], .category-block[id] {
  scroll-margin-top: 72px;
}
@media (min-width: 1024px) {
  .section       { padding-block: var(--space-9); }
  .section-tight { padding-block: var(--space-8); }
  section[id], .category-block[id] { scroll-margin-top: 88px; }
}

/* Focus state — accessibility */
:focus-visible {
  outline: 2px solid var(--ounin-sage-deep);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}