/* ============================================================
   Woven Studio — Design System
   Foundation tokens + type ramp + component library
   Resolved from Figma "Woven Studio – Foundations"
   (fileKey UEkQWWfLXmER0OwpKHwSJ8). Values are authoritative
   for color; radius/spacing use the system's named ramp.
   ============================================================ */

:root {
  /* ---- TEXT ---------------------------- (Portfolio mode) ----- */
  --ws-text-default:    #40282c;
  --ws-text-secondary:  #6b5a5e;
  --ws-text-tertiary:   #8f7f83;
  --ws-text-inverse:    #ffffff;
  --ws-text-disabled:   #c8b0b5;
  --ws-text-brand:      #7a1b2e;
  --ws-text-accent:     #6b1a5e;
  --ws-text-success:    #2dbd6e;
  --ws-text-error:      #e84d4d;

  /* ---- SURFACE ------------------------------------------------ */
  --ws-surface-default:   #ffffff;
  --ws-surface-subtle:    #faf6f7;
  --ws-surface-muted:     #f3edee;
  --ws-surface-strong:    #40282c;   /* layout/page/dark */
  --ws-surface-inverse:   #40282c;   /* dark inverse sections (Portfolio's dark surface; the raw inverse token is a light blush) */
  --ws-surface-brand:     #7a1b2e;
  --ws-surface-accent:    #6b1a5e;
  --ws-surface-brand-dark:#40282c;

  /* ---- BORDER / UTILITY -------------------------------------- */
  --ws-border-default:  #efe7e9;
  --ws-border-subtle:   #f5eef0;
  --ws-border-strong:   #ddccd0;
  --ws-focus-ring:      #7a1b2e;
  --ws-scrim:           rgba(46, 28, 30, 0.6);

  /* ---- BRAND (primary action + states) ---------------------- */
  --ws-brand:           #7a1b2e;
  --ws-brand-hover:     #6b1526;
  --ws-brand-pressed:   #5c1020;
  --ws-brand-disabled:  #d4a3ae;

  /* ---- ACCENT ------------------------------------------------- */
  --ws-accent:          #6b1a5e;
  --ws-accent-hover:    #5a1150;
  --ws-accent-pressed:  #4d0e44;

  /* ---- SECONDARY / SUPPORT ----------------------------------- */
  --ws-secondary:        #fdeef1;
  --ws-secondary-hover:  #fbe0e5;
  --ws-secondary-pressed:#f8cdd4;
  --ws-support-soft:     #fde8ec;
  --ws-support-warm:     #feedd6;

  /* ---- TAG SURFACES (light Portfolio-mode surfaces) --------- */
  --ws-tag-neutral:        #f3edee;
  --ws-tag-brand:          #fdeef1;
  --ws-tag-success:        #e4f9ed;
  --ws-tag-caution:        #fef3e2;
  --ws-tag-warning:        #fef8e1;
  --ws-tag-critical:       #fdd8d8;
  --ws-tag-feature:        #feebf5;
  --ws-tag-promo:          #fde8f5;
  --ws-tag-identifier:     #e8f7fa;

  /* ---- RADIUS (named ramp) ---------------------------------- */
  --ws-radius-xs:   4px;
  --ws-radius-sm:   8px;
  --ws-radius-md:   12px;
  --ws-radius-lg:   16px;
  --ws-radius-xl:   20px;
  --ws-radius-2xl:  28px;
  --ws-radius-full: 999px;

  /* ---- SPACING (named ramp) --------------------------------- */
  --ws-space-2xs: 2px;
  --ws-space-xs:  4px;
  --ws-space-sm:  8px;
  --ws-space-md:  12px;
  --ws-space-lg:  16px;
  --ws-space-xl:  24px;
  --ws-space-2xl: 32px;
  --ws-space-3xl: 40px;
  --ws-space-4xl: 48px;
  --ws-space-5xl: 64px;
  --ws-space-6xl: 80px;
  --ws-space-7xl: 96px;
  --ws-space-8xl: 128px;

  /* ---- TYPOGRAPHY -------------------------------------------- */
  --ws-font:         'Inter', system-ui, -apple-system, sans-serif;
  --ws-font-display: 'Fraunces', 'Playfair Display', Georgia, serif; /* Display styles */

  /* ---- ELEVATION -------------------------------------------- */
  --ws-shadow-sm: 0 1px 2px rgba(26,29,46,0.06), 0 1px 3px rgba(26,29,46,0.05);
  --ws-shadow-md: 0 4px 12px rgba(26,29,46,0.08), 0 2px 4px rgba(26,29,46,0.04);
  --ws-shadow-lg: 0 18px 48px rgba(26,29,46,0.14), 0 4px 12px rgba(26,29,46,0.06);

  /* ---- LAYOUT ----------------------------------------------- */
  --ws-max-w: 860px;   /* unified wrapper width — matches shared.css --max-w */
  --ws-max-w-reading: 720px;
  --ws-pad-x: clamp(1.25rem, 5vw, 3rem);
  --ws-nav-h: 72px;    /* fixed top-nav height — keep identical to shared.css --nav-h */
}

/* Fixed nav height per breakpoint (shared with shared.css) */
@media (max-width: 640px) { :root { --ws-nav-h: 60px; } }

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ws-surface-default);
  color: var(--ws-text-default);
  font-family: var(--ws-font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ws-focus-ring); outline-offset: 2px; border-radius: var(--ws-radius-xs); }

/* ============================================================
   TYPOGRAPHY RAMP  (Inter — Woven Studio text styles)
   ============================================================ */
.ws-display-xl { font-family: var(--ws-font-display); font-optical-sizing: auto; font-weight: 900; font-size: clamp(3rem, 7vw, 5rem);    line-height: 1.06; letter-spacing: -0.01em; }
.ws-display-lg { font-family: var(--ws-font-display); font-optical-sizing: auto; font-weight: 900; font-size: clamp(2.5rem, 5.5vw, 4rem);line-height: 1.08; letter-spacing: -0.01em; }
.ws-display-md { font-family: var(--ws-font-display); font-optical-sizing: auto; font-weight: 900; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em; }
.ws-heading-xl { font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem);  line-height: 1.14; letter-spacing: -0.01em; }
.ws-heading-lg { font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.008em; }
.ws-heading-md { font-weight: 600; font-size: 2rem;   line-height: 1.25; letter-spacing: -0.005em; }
.ws-heading-sm { font-weight: 600; font-size: 1.5rem; line-height: 1.3;  letter-spacing: -0.005em; }
.ws-body-lg    { font-weight: 400; font-size: 1.125rem; line-height: 1.6; }
.ws-body-md    { font-weight: 400; font-size: 1rem;     line-height: 1.55; }
.ws-body-sm    { font-weight: 400; font-size: 0.875rem; line-height: 1.5; }
.ws-strong     { font-weight: 600; }
.ws-caption    { font-weight: 400; font-size: 0.75rem;  line-height: 1.35; color: var(--ws-text-secondary); }
.ws-overline {
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ws-text-secondary);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.ws-container { max-width: var(--ws-max-w); margin: 0 auto; padding-inline: var(--ws-pad-x); }
.ws-section   { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ============================================================
   TOP NAV — website
   ============================================================ */
.ws-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--ws-nav-h);
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.ws-nav__inner {
  max-width: var(--ws-max-w); height: 100%; margin: 0 auto; padding-inline: var(--ws-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ws-space-xl);
}
.ws-nav__brand { display: inline-flex; align-items: center; gap: var(--ws-space-sm); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.ws-nav__brand img { width: 26px; height: 26px; border-radius: var(--ws-radius-sm); }
.ws-nav__links { display: flex; align-items: center; gap: var(--ws-space-xl); list-style: none; }
.ws-nav__link {
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ws-text-secondary); transition: color 0.2s;
}
.ws-nav__link:hover { color: var(--ws-text-default); }
/* Solid scrolled state (over light content) */
.ws-nav.is-solid {
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--ws-border-default);
}
/* Inverse state (over dark hero) */
.ws-nav.is-inverse .ws-nav__brand { color: var(--ws-text-inverse); }
.ws-nav.is-inverse .ws-nav__link  { color: rgba(255,255,255,0.72); }
.ws-nav.is-inverse .ws-nav__link:hover { color: #fff; }
@media (max-width: 640px) { .ws-nav__links .ws-nav__link--hideable { display: none; } }

/* ============================================================
   BUTTONS  (button-default + button-pill)
   ============================================================ */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ws-space-sm);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  padding: 0.75rem 1.375rem; border-radius: var(--ws-radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  white-space: nowrap;
}
.ws-btn:active { transform: translateY(1px); }
.ws-btn--pill { border-radius: var(--ws-radius-full); }
.ws-btn--sm { font-size: 0.8125rem; padding: 0.5rem 1rem; }
.ws-btn--lg { font-size: 1rem; padding: 0.9rem 1.75rem; }

.ws-btn--primary { background: var(--ws-brand); color: #fff; }
.ws-btn--primary:hover { background: var(--ws-brand-hover); }
.ws-btn--primary:active { background: var(--ws-brand-pressed); }

.ws-btn--secondary { background: var(--ws-secondary); color: var(--ws-brand); }
.ws-btn--secondary:hover { background: var(--ws-secondary-hover); }

.ws-btn--tertiary { background: transparent; color: var(--ws-text-default); }
.ws-btn--tertiary:hover { background: var(--ws-surface-muted); }

/* On dark surfaces */
.ws-btn--on-dark.ws-btn--secondary { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.18); }
.ws-btn--on-dark.ws-btn--secondary:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.ws-btn--on-dark.ws-btn--tertiary { color: rgba(255,255,255,0.82); }
.ws-btn--on-dark.ws-btn--tertiary:hover { background: rgba(255,255,255,0.10); color: #fff; }
.ws-btn[aria-disabled="true"], .ws-btn:disabled { background: var(--ws-brand-disabled); color: #fff; cursor: default; pointer-events: none; }

/* ============================================================
   LINKS
   ============================================================ */
.ws-link {
  display: inline-flex; align-items: center; gap: var(--ws-space-xs);
  font-weight: 600; font-size: 0.9375rem; color: var(--ws-text-brand);
  transition: color 0.18s, gap 0.18s;
}
.ws-link:hover { color: var(--ws-brand-hover); gap: 0.6rem; }
.ws-link--muted { color: var(--ws-text-secondary); }
.ws-link--muted:hover { color: var(--ws-text-default); }

/* ============================================================
   TAGS / CHIPS  (feedback/tag + input/chip)
   ============================================================ */
.ws-tag {
  display: inline-flex; align-items: center; gap: var(--ws-space-xs);
  font-size: 0.75rem; font-weight: 600; letter-spacing: -0.003em;
  padding: 0.25rem 0.625rem; border-radius: var(--ws-radius-full);
  background: var(--ws-tag-neutral); color: var(--ws-text-default);
}
.ws-tag--brand         { background: var(--ws-tag-brand);         color: var(--ws-brand); }
.ws-tag--feature       { background: var(--ws-tag-feature);       color: var(--ws-accent-pressed); }
.ws-tag--success       { background: var(--ws-tag-success);       color: #157a45; }
.ws-tag--identifier    { background: var(--ws-tag-identifier);    color: #0f6d7a; }
.ws-tag--promo         { background: var(--ws-tag-promo);         color: #b02a78; }

.ws-chip {
  display: inline-flex; align-items: center; gap: var(--ws-space-sm);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em;
  padding: 0.4rem 0.875rem; border-radius: var(--ws-radius-full);
  background: var(--ws-surface-subtle); color: var(--ws-text-secondary);
  border: 1px solid var(--ws-border-default);
}
/* Chips on dark */
.ws-chip--on-dark { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.14); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.ws-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ws-space-xl); flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.ws-section-header__eyebrow { margin-bottom: var(--ws-space-md); color: var(--ws-text-brand); }
.ws-section-header__title { color: var(--ws-text-default); }
.ws-section-header__subtitle { margin-top: var(--ws-space-md); max-width: 52ch; color: var(--ws-text-secondary); }

/* ============================================================
   CARD  (card-promotional / card-data)
   ============================================================ */
.ws-card {
  background: var(--ws-surface-default);
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-sm);
  transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
}
.ws-card--interactive:hover { box-shadow: var(--ws-shadow-lg); transform: translateY(-3px); border-color: var(--ws-border-strong); }

/* FOOTER — now a reusable web component; see assets/site-footer.js (<site-footer>) */

/* ============================================================
   UTILITIES
   ============================================================ */
.ws-eyebrow-rule { display: inline-flex; align-items: center; gap: var(--ws-space-md); }
.ws-eyebrow-rule::before { content: ''; width: 1.75rem; height: 1.5px; background: currentColor; opacity: 0.5; }

/* ============================================================
   LIGHTBOX  (assets/lightbox.js appends .lb-overlay to <body>)
   ============================================================ */
.lb-trigger { cursor: zoom-in; }
.lb-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(40, 24, 28, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.lb-overlay.lb-open { opacity: 1; pointer-events: all; }
.lb-img {
  max-width: min(92vw, 1400px); max-height: 90vh; object-fit: contain;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  transform: scale(0.94); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); cursor: default;
}
.lb-overlay.lb-open .lb-img { transform: scale(1); }
.lb-close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75); font-size: 1.375rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.lb-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } }