/* =========================================================================
   Arc Grove — Foundational Tokens (Supplier SRM port)
   Forked from arcgrove-website design-system/colors_and_type.css.
   CHINA CONSTRAINT: zero third-party hosts — fonts are self-hosted below
   (the upstream Google Fonts @import is the one deliberate removal).
   ========================================================================= */

@font-face {
  font-family: "Inter Tight";
  src: url("/static/fonts/InterTight-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/static/fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alata";
  src: url("/static/fonts/Alata-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand Colors ---------- */
  --ag-sage:           #465849;   /* Primary brand — links, badges, pagination */
  --ag-dark-sage:      #4B544C;   /* CTA buttons, interactive, star ratings */
  --ag-green-black:    #242B26;   /* Text — never pure black */
  --ag-white:          #FFFFFF;
  --ag-off-white:      #f9fafb;   /* Section bg, card fills */
  --ag-muted-gray:     #7B7B7B;   /* Secondary/tertiary text, metadata */
  --ag-sage-10:        rgba(70,88,73,0.1);

  /* Theme-derived supporting tokens (from Shopify theme) */
  --ag-half-white:     #f4f4f4;   /* alt section background used in theme */
  --ag-hairline:       rgba(0,0,0,0.1);
  --ag-hairline-strong:#e0e0e0;

  /* Quick-ship / product badge hues (from custom.css) */
  --ag-badge-quickship:#a48453;
  --ag-badge-custom:   #433e38;
  --ag-badge-mad:      #242b26;
  --ag-badge-overstock:#1e3a5f;

  /* ---------- Foreground / Semantic Color ---------- */
  --fg-1: var(--ag-green-black);  /* Primary text */
  --fg-2: var(--ag-muted-gray);   /* Secondary text */
  --fg-inverse: var(--ag-white);
  --fg-link: var(--ag-sage);
  --fg-link-hover: var(--ag-dark-sage);

  --bg-page: var(--ag-white);
  --bg-section: var(--ag-off-white);
  --bg-section-alt: var(--ag-half-white);
  --bg-hover-subtle: var(--ag-sage-10);

  --border-soft: var(--ag-hairline);
  --border-strong: var(--ag-hairline-strong);

  /* ---------- Font families (Latin webfonts first — they carry no CJK
     glyphs, so hanzi falls through to the system CJK stack) ---------- */
  --ff-display: 'Playfair Display', 'Times New Roman', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif;
  --ff-ui:      'Alata', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --ff-body:    'Inter Tight', 'Inter', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* ---------- SRM semantic accents (promoted from trade-staff inline values) ---------- */
  --ag-prio-high:  #a4612f;
  --ag-pending-fg: #7a5f33;
  --ag-pending-bg: rgba(164, 132, 83, 0.14);
  --ag-danger-fg:  #8a3a3a;
  --ag-danger-bg:  rgba(150, 60, 60, 0.12);
  --ag-success:    #8aa890;

  /* ---------- Type scale (px) ---------- */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-base:15px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;
  --fs-6xl: 60px;
  --fs-hero:68px;

  /* ---------- Weights ---------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 60px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* ---------- Radii (theme is mostly square — use sparingly) ---------- */
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 100px;       /* badges, filter chips */
  --radius-circle: 50%;

  /* ---------- Shadows (subtle; theme avoids heavy shadows) ---------- */
  --shadow-0: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-focus: 0 0 0 2px var(--ag-sage-10);
  --shadow-swatch-selected: 0 0 8px 0 rgba(0,0,0,0.5);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med:  0.3s;
  --dur-slow: 0.5s;
  --transition-fast: all var(--dur-fast) var(--ease-standard);
  --transition-med:  all var(--dur-med)  var(--ease-standard);

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-pad: clamp(16px, 4vw, 48px);
  --header-h: 72px;

  /* ---------- UI letter spacing ---------- */
  --tracking-ui: 0.8px;        /* nav */
  --tracking-btn: 0.96px;      /* buttons + uppercase labels */
}

/* =========================================================================
   Semantic Element Styles — use these as baseline selectors.
   ========================================================================= */

html {
  font-family: var(--ff-body);
  font-size: calc(0.8125rem + 0.20833vw); /* fluid: ~13px@320, ~16px@1440 */
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1440px) { html { font-size: 16px; } }

body { font-family: var(--ff-body); color: var(--fg-1); line-height: 1.6; }

/* Display (Playfair) — H1, H2, feature callouts */
h1, .h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0 0 var(--sp-5);
}
h1.large, .h1-large {
  font-size: clamp(44px, 6vw, var(--fs-hero));
}
h2, .h2 {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.15;
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}
.pull-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--fg-1);
}

/* UI (Alata) — nav, buttons, H3/H4 subheads, labels */
h3, .h3 {
  font-family: var(--ff-ui);
  font-weight: var(--fw-regular);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
h4, .h4 {
  font-family: var(--ff-ui);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

.nav-link,
.eyebrow,
.label-ui {
  font-family: var(--ff-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--fg-1);
}

.btn-label {
  font-family: var(--ff-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-btn);
  text-transform: uppercase;
}

.caption, .metadata {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Body (Inter Tight) — paragraphs, spec, form fields */
p, .body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}
.body-sm  { font-size: var(--fs-md); }
.body-xs  { font-size: var(--fs-sm); color: var(--fg-2); }
.body-emph{ font-weight: var(--fw-semibold); }

.price {
  font-family: var(--ff-ui);     /* theme overrides price to Alata */
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
  color: var(--fg-1);
}

/* Links */
a, .link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); }

/* Mono — rarely used; for specs/tabular */
code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* Selection tint matches theme (dark green/white) */
::selection { background: var(--ag-dark-sage); color: var(--ag-white); }

/* =========================================================================
   CJK carve-out (SPEC §3): uppercase is meaningless for hanzi and Latin
   tracking reads as gaps — driven by <html lang="zh-CN">.
   ========================================================================= */
:lang(zh) .srm-label, :lang(zh) .srm-btn, :lang(zh) .srm-nav-link,
:lang(zh) .srm-eyebrow, :lang(zh) .srm-status, :lang(zh) .srm-pill,
:lang(zh) .srm-seg button, :lang(zh) h3, :lang(zh) h4,
:lang(zh) .srm-chat-day, :lang(zh) .srm-chat-earlier, :lang(zh) .srm-chat-new,
:lang(zh) .srm-msg-quote-name {
  text-transform: none;
  letter-spacing: 0.05em;
}
:lang(zh) .srm-label, :lang(zh) .srm-status, :lang(zh) .srm-pill,
:lang(zh) .srm-sub, :lang(zh) .srm-eyebrow,
:lang(zh) .srm-chat-day, :lang(zh) .srm-msg-quote-name {
  font-size: 12px; /* floor micro-labels — 9-10px hanzi is illegible */
}
:lang(zh) body {
  line-height: 1.7;
}