/*
 * CraftMarket design tokens.
 * Four skins share the same semantic variable names (docs/CraftMarket-SRS.md, section 1):
 *   ceramics (default, Home 1) · jewelry (Home 2) · rattan (Home 3) · trade (Home 4).
 * The skin is set on <html data-skin="…">.
 * Components use semantic tokens only (no raw hex in component files).
 */

:root {
  /* Brand */
  --color-primary: #B8532F;
  --color-primary-hover: #9A4224;
  --color-primary-light: #F5E4DA;
  --color-primary-fg: #FFFFFF;
  --color-accent: #D9A35B;
  --color-accent-hover: #C58C42;
  --color-accent-light: #FBF1E2;
  --color-accent-fg: #2B211B;
  --color-eco: #4F6B52;

  /* Status */
  --color-success: #3F7A4F;
  --color-success-bg: #E5F1E7;
  --color-error: #B3261E;
  --color-error-bg: #FBE6E4;
  --color-warning: #B86E12;
  --color-warning-bg: #FCEFD9;
  --color-info: #2F6B8A;
  --color-info-bg: #E2EFF5;
  --color-star: #E0A33A;

  /* Surfaces */
  --bg-page: #FBF8F3;
  --bg-section: #F1E7DB;
  --bg-card: #FFFFFF;
  --bg-subtle: #F6EEE5;
  --bg-hover: #F0E7DC;
  --bg-input: #FFFFFF;
  --bg-dark: #241B16;
  --bg-dark-soft: #33271F;
  --bg-overlay: rgba(31, 22, 16, 0.55);

  /* Borders */
  --border-default: #E8DED3;
  --border-strong: #D5C7B8;
  --border-focus: #AA4D2A;

  /* Text */
  --text-heading: #241B16;
  --text-body: #4A3F38;
  --text-secondary: #6B5E54;
  --text-muted: #7A6D62;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: rgba(255, 255, 255, 0.72);
  --text-link: #AA4D2A;

  /* Chrome */
  --topbar-bg: #2A201B;
  --topbar-fg: rgba(255, 255, 255, 0.78);
  --header-bg: #FBF8F3;
  --footer-bg: var(--topbar-bg); /* one dark tone top and bottom */
  --footer-fg: rgba(255, 255, 255, 0.74);
  --footer-heading: #FFFFFF;
  --footer-border: rgba(255, 255, 255, 0.12);

  /* Focus */
  --ui-focus-ring: rgba(170, 77, 42, 0.4);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(43, 33, 27, 0.05);
  --shadow-sm: 0 2px 8px rgba(43, 33, 27, 0.06);
  --shadow-md: 0 8px 24px rgba(43, 33, 27, 0.09);
  --shadow-lg: 0 18px 48px rgba(43, 33, 27, 0.14);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
  --btn-radius: 9999px;
  --input-radius: 10px;
  --card-radius: 12px;

  /* Layout */
  --container-width: 1280px;
  --gutter: 24px;
  --section-space: 80px;
  --header-height: 76px;

  /* Typography */
  --font-body: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Fraunces, Georgia, "Times New Roman", serif;
  --font-accent: Caveat, "Segoe Print", cursive;
  --heading-weight: 500;
  --heading-tracking: -0.025em;
  --heading-transform: none;
  --fs-display: clamp(2.75rem, 5vw, 4.5rem);
  --fs-h1: clamp(2.125rem, 3.6vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 2.6vw, 2.375rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;
  --label-tracking: 0.16em;

  color-scheme: light;
}

/* Section rhythm (the gap between the content of two sections): 90px desktop, 70px tablet, 50px phones (same as the Become a Vendor page). */
@media (max-width: 1099px) { :root { --section-space: 70px; } }
@media (max-width: 767px) { :root { --section-space: 50px; } }

/* Home 2 – Handmade Jewelry: ivory, ink black, champagne gold. */
:root[data-skin="jewelry"] {
  --color-primary: #1B1A18;
  --color-primary-hover: #3A3733;
  --color-primary-light: #EFE7DF;
  --color-primary-fg: #FFFFFF;
  --color-accent: #B88A4E;
  --color-accent-hover: #9C7239;
  --color-accent-light: #F4EADC;
  --color-accent-fg: #1B1A18;
  --color-eco: #8A7A55;

  --bg-page: #FBF8F3;
  --bg-section: #F2EAE3;
  --bg-subtle: #F6F0EA;
  --bg-hover: #EFE6DC;
  --bg-dark: #1B1A18;
  --bg-dark-soft: #1E1C1A;

  --border-default: #E9E1D8;
  --border-strong: #D6CABD;
  --border-focus: #1B1A18;

  --text-heading: #1B1A18;
  --text-body: #3A3734;
  --text-secondary: #6B655F;
  --text-muted: #78716A;
  --text-link: #1B1A18;

  --topbar-bg: #1B1A18;
  --topbar-fg: #FFFFFF;
  --header-bg: #FBF8F3;
  --footer-bg: #F4EDE6;
  --footer-fg: #4D4843;
  --footer-heading: #1B1A18;
  --footer-border: #E2D8CD;

  --ui-focus-ring: rgba(184, 138, 78, 0.5);

  --btn-radius: 2px;
  --input-radius: 2px;
  --card-radius: 4px;

  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Cormorant Garamond", "Times New Roman", serif;
  --heading-weight: 500;
  --heading-tracking: -0.005em;
  --fs-display: clamp(2.75rem, 5vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 2.8vw, 2.625rem);
  --label-tracking: 0.2em;

  /* Gold for small text (kickers): --color-accent is too light for text on ivory. */
  --text-accent: #87622F;
}

/* Home 3 – Home Decor, Rattan & Wood: moss green and sand. */
:root[data-skin="rattan"] {
  --color-primary: #304933;
  --color-primary-hover: #1F3624;
  --color-primary-light: #E4EAE1;
  --color-primary-fg: #FFFFFF;
  --color-accent: #C4935A;
  --color-accent-hover: #AD7C44;
  --color-accent-light: #F6ECDD;
  --color-accent-fg: #2A2418;
  --text-accent: #8F6232; /* accent brown dark enough for small text (4.8:1 on the cream cards) */
  --color-eco: #304933;

  --bg-page: #F7F3EB;
  --bg-section: #EFE9DC;
  --bg-subtle: #F2EDE3;
  --bg-hover: #ECE5D6;
  --bg-dark: #1F3624;
  --bg-dark-soft: #2A4430;

  --border-default: #E5DED0;
  --border-strong: #D2C8B5;
  --border-focus: #304933;

  --text-heading: #29281F;
  --text-body: #47463B;
  --text-secondary: #646253;
  --text-muted: #767464;
  --text-link: #304933;

  --topbar-bg: #1F3624;
  --topbar-fg: #FFFFFF;
  --header-bg: #FFFFFF;
  --footer-bg: #1F3624;
  --footer-fg: rgba(255, 255, 255, 0.76);
  --footer-border: rgba(255, 255, 255, 0.14);

  --ui-focus-ring: rgba(48, 73, 51, 0.4);

  --card-radius: 12px;

}

/* Home 4 – B2B Wholesale Portal: forest green and amber. */
:root[data-skin="trade"] {
  --color-primary: #1E4D3A;
  --color-primary-hover: #163B2C;
  --color-primary-light: #E3EEE8;
  --color-primary-fg: #FFFFFF;
  --color-accent: #F2A23A;
  --color-accent-hover: #E08E22;
  --color-accent-light: #FDF0DC;
  --color-accent-fg: #1B1B1B;
  --color-eco: #1E4D3A;

  --bg-page: #FFFFFF;
  --bg-section: #F5F7F5;
  --bg-subtle: #F3F5F3;
  --bg-hover: #EDF2EE;
  --bg-dark: #133A2B;
  --bg-dark-soft: #1B4836;

  --border-default: #E2E7E3;
  --border-strong: #C9D3CC;
  --border-focus: #1E4D3A;

  --text-heading: #14251C;
  --text-body: #36443C;
  --text-secondary: #5F6E65;
  --text-muted: #6C7870;
  --text-link: #1E4D3A;

  --topbar-bg: #F5F7F5;
  --topbar-fg: #36443C;
  --header-bg: #FFFFFF;
  --footer-bg: #133A2B;
  --footer-fg: rgba(255, 255, 255, 0.74);
  --footer-border: rgba(255, 255, 255, 0.14);

  --ui-focus-ring: rgba(242, 162, 58, 0.55);

  --btn-radius: 6px;
  --input-radius: 6px;
  --card-radius: 8px;

  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --heading-weight: 700;
  --heading-tracking: -0.02em;
  --fs-display: clamp(2.25rem, 4vw, 3.5rem);
  --fs-h1: clamp(2rem, 3.2vw, 2.875rem);
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);
  --label-tracking: 0.08em;
}