/* WeShare design tokens — single source of truth. See DESIGN.md. */
:root {
  /* Brand core */
  --c-yellow: #FFD200;
  --c-yellow-deep: #F5B800;
  --c-mustard: #D8A019;   /* logo color (docs/brand/logo.jpeg) */
  --c-ink: #111111;
  --c-paper: #FAF8F3;
  --c-white: #FFFFFF;

  /* Pill accents (service tags) */
  --c-lavender: #C39BEA;
  --c-sky: #7FD3F7;
  --c-salmon: #F9876E;
  --c-mint: #5CC9A0;

  /* Extended palette (logo variants) */
  --c-terracotta: #E4572E;
  --c-forest: #0F5B4E;
  --c-deep-blue: #1F355E;
  --c-sea-blue: #6D8FAE;
  --c-taupe: #B8A999;
  --c-sage: #A6B59A;

  /* Third-party brand colors (social buttons only) */
  --brand-instagram: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  --brand-facebook: #1877F2;
  --brand-linkedin: #0A66C2;
  --brand-whatsapp: #25D366;
  --brand-tiktok: #000000;
  --brand-tiktok-cyan: #25F4EE;
  --brand-tiktok-red: #FE2C55;

  /* Semantic */
  --bg: var(--c-paper);
  --fg: var(--c-ink);
  --fg-muted: #55524C;
  --fg-muted-inv: #C9C4BA;  /* muted text on ink */
  --border-inv: #2A2A2A;    /* borders on ink */
  --accent: var(--c-yellow);
  --accent-fg: var(--c-ink);
  --surface: var(--c-white);
  --border: #E7E2D8;
  --danger: #B42318;
  --success: #067647;

  /* Type */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive;
  --font-logo: "Outfit", var(--font-sans); /* "Share" wordmark only (matches poster lockup) */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2.5vw, 3rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 4vw, 4.5rem);
  --fs-display: clamp(2.375rem, 1rem + 7vw, 7.5rem);
  --tracking-wide: 0.28em;

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  /* Fluid layout spacing (mobile → desktop) */
  --section-y: clamp(3.5rem, 2rem + 6vw, 6rem);
  --stack-lg: clamp(2rem, 1.2rem + 3vw, 3rem);   /* big gaps: split columns, section heads */
  --panel-pad: clamp(1.25rem, 0.8rem + 2vw, 2rem);
  --header-h: 64px;
  --max-w: 1240px;

  /* Shape */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(17 17 17 / .06), 0 4px 16px rgb(17 17 17 / .06);
  --shadow-2: 0 8px 40px rgb(17 17 17 / .12);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 150ms; --dur-2: 300ms; --dur-3: 600ms;
}