/*--------------------------------------------------------------
  JSS Design Tokens — Silk Atelier
  Accent: muted brass / silk bronze (not blue).
  Loads after Ambed site.css; remaps --ambed-* safely.
--------------------------------------------------------------*/

:root {
  /* ---------- Brand / color ---------- */
  --jss-navy: #1C2434;
  --jss-navy-rgb: 28, 36, 52;
  --jss-accent: #9A7B4F;
  --jss-accent-rgb: 154, 123, 79;
  --jss-accent-hover: #7E6340;
  --jss-accent-soft: rgba(154, 123, 79, 0.12);
  --jss-surface: #F3F4F6;
  --jss-surface-rgb: 243, 244, 246;
  --jss-white: #FFFFFF;
  --jss-white-rgb: 255, 255, 255;
  --jss-text: #1C2434;
  --jss-text-muted: #5A6170;
  --jss-text-subtle: #8B919E;
  --jss-border: #E3E5EA;
  --jss-border-strong: #C9CED6;
  --jss-success: #1F7A4D;
  --jss-error: #C62828;
  --jss-focus-ring: rgba(154, 123, 79, 0.4);

  /* ---------- Typography ---------- */
  --jss-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jss-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --jss-fs-xs: 0.75rem;
  --jss-fs-sm: 0.875rem;
  --jss-fs-base: 1rem;
  --jss-fs-md: 1.125rem;
  --jss-fs-lg: 1.25rem;
  --jss-fs-xl: 1.5rem;
  --jss-fs-2xl: 2rem;
  --jss-fs-3xl: 2.5rem;
  --jss-fs-4xl: 3.25rem;

  --jss-lh-tight: 1.2;
  --jss-lh-snug: 1.35;
  --jss-lh-normal: 1.6;
  --jss-lh-relaxed: 1.75;

  --jss-fw-regular: 400;
  --jss-fw-medium: 500;
  --jss-fw-semibold: 600;
  --jss-fw-bold: 700;
  --jss-tracking-tight: -0.02em;
  --jss-tracking-wide: 0.06em;

  /* ---------- Spacing scale ---------- */
  --jss-space-1: 4px;
  --jss-space-2: 8px;
  --jss-space-3: 12px;
  --jss-space-4: 16px;
  --jss-space-5: 24px;
  --jss-space-6: 32px;
  --jss-space-7: 48px;
  --jss-space-8: 64px;

  --jss-section-y: var(--jss-space-8);
  --jss-section-y-sm: var(--jss-space-7);
  --jss-gutter: var(--jss-space-4);

  /* ---------- Radii ---------- */
  --jss-radius-sm: 4px;
  --jss-radius-md: 8px;
  --jss-radius-lg: 12px;
  --jss-radius-xl: 16px;
  --jss-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --jss-shadow-sm: 0 1px 2px rgba(28, 36, 52, 0.06);
  --jss-shadow-md: 0 4px 16px rgba(28, 36, 52, 0.08);
  --jss-shadow-lg: 0 12px 32px rgba(28, 36, 52, 0.12);

  /* ---------- Layout ---------- */
  --jss-container-max: 1240px;
  --jss-container-pad: var(--jss-space-4);

  /* ---------- Z-index ---------- */
  --jss-z-base: 1;
  --jss-z-dropdown: 100;
  --jss-z-sticky: 200;
  --jss-z-header: 300;
  --jss-z-overlay: 400;
  --jss-z-modal: 500;
  --jss-z-toast: 600;
  --jss-z-float: 350;
  --jss-z-cursor: 9998;

  /* ---------- Transitions ---------- */
  --jss-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jss-duration: 200ms;

  /* ============================================================
     Ambed variable remap — existing theme classes inherit JSS
     ============================================================ */
  --ambed-font: var(--jss-font-body);
  --ambed-reey-font: var(--jss-font-display);
  --ambed-gray: var(--jss-text-muted);
  --ambed-gray-rgb: 90, 97, 112;
  --ambed-white: var(--jss-white);
  --ambed-white-rgb: var(--jss-white-rgb);
  --ambed-black: var(--jss-navy);
  --ambed-black-rgb: var(--jss-navy-rgb);
  --ambed-base: var(--jss-accent);
  --ambed-base-rgb: var(--jss-accent-rgb);
  --ambed-primary: var(--jss-surface);
  --ambed-primary-rgb: var(--jss-surface-rgb);
  --ambed-bdr-color: var(--jss-border);
  --ambed-bdr-color-rgb: 227, 229, 234;
}

@media (min-width: 768px) {
  :root {
    --jss-container-pad: var(--jss-space-5);
    --jss-section-y: 80px;
  }
}

@media (min-width: 1200px) {
  :root {
    --jss-container-pad: var(--jss-space-6);
  }
}