/* ============================================================
   WISTERIA · DESIGN TOKENS
   Trellis Stack LLC — wisteriasocial.com
   Single source of truth. Sections must not redefine these.
   ============================================================ */

:root {
  /* ---- Core palette -------------------------------------
     Warm bone base carried from the app design language,
     wisteria violet as the brand signal, terracotta as the
     warm secondary, deep plum ink for type.               */

  --w-bone:        #F7F3EE;   /* page base — warm paper      */
  --w-bone-2:      #F1EBE3;   /* subtle surface step         */
  --w-bone-3:      #E8E0D5;   /* borders on bone             */
  --w-white:       #FFFCF8;   /* cards on bone               */

  --w-ink:         #1A1320;   /* near-black, violet cast     */
  --w-ink-2:       #2E2436;   /* secondary dark surface      */
  --w-ink-3:       #4A3D54;   /* tertiary / muted on dark    */

  --w-wisteria:    #8B6FC4;   /* the brand violet            */
  --w-wisteria-lt: #B9A3E0;   /* light violet, dark-bg text  */
  --w-wisteria-dk: #6247A0;   /* pressed / deep              */
  --w-plum:        #4A2D5C;   /* deep plum                   */

  --w-terra:       #C2603F;   /* terracotta — warm accent    */
  --w-terra-lt:    #E08D6B;
  --w-rose:        #C77A8E;   /* dusty rose                  */
  --w-sage:        #6E8B6A;   /* sage — used sparingly       */

  /* ---- Semantic ----------------------------------------- */
  --bg:            var(--w-bone);
  --surface:       var(--w-white);
  --surface-sunk:  var(--w-bone-2);
  --border:        rgba(26, 19, 32, 0.10);
  --border-strong: rgba(26, 19, 32, 0.18);

  --text:          var(--w-ink);
  --text-2:        rgba(26, 19, 32, 0.68);   /* body secondary  */
  --text-3:        rgba(26, 19, 32, 0.46);   /* captions/labels */

  --accent:        var(--w-wisteria);
  --accent-warm:   var(--w-terra);

  /* On dark sections */
  --on-dark:       #F5F0F7;
  --on-dark-2:     rgba(245, 240, 247, 0.66);
  --on-dark-3:     rgba(245, 240, 247, 0.40);
  --border-dark:   rgba(245, 240, 247, 0.14);

  /* ---- Type --------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", monospace;

  /* Fluid display scale — clamp(min, fluid, max) */
  --t-hero:   clamp(2.9rem, 7.4vw, 6.6rem);
  --t-d1:     clamp(2.3rem, 5.2vw, 4.4rem);
  --t-d2:     clamp(1.9rem, 3.7vw, 3.1rem);
  --t-d3:     clamp(1.45rem, 2.3vw, 2rem);

  --t-lead:   clamp(1.08rem, 1.5vw, 1.375rem);
  --t-body:   1.0625rem;
  --t-sm:     0.9375rem;
  --t-xs:     0.8125rem;
  --t-label:  0.6875rem;

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.62;

  /* Eyebrow / label treatment used site-wide */
  --tracking-label: 0.16em;

  /* ---- Space / rhythm ------------------------------------ */
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --maxw:        1240px;
  --maxw-text:   min(60ch, 100%);
  --section-y:   clamp(5.5rem, 11vw, 10.5rem);

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  34px;
  --r-pill: 999px;
  --r-phone: 46px;

  /* ---- Elevation ----------------------------------------- */
  --sh-sm: 0 1px 2px rgba(26,19,32,.05), 0 2px 8px rgba(26,19,32,.04);
  --sh-md: 0 2px 6px rgba(26,19,32,.05), 0 12px 30px rgba(26,19,32,.07);
  --sh-lg: 0 4px 12px rgba(26,19,32,.06), 0 28px 64px rgba(26,19,32,.10);
  --sh-phone: 0 2px 8px rgba(26,19,32,.10), 0 32px 70px -18px rgba(74,45,92,.42);

  /* ---- Motion -------------------------------------------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);      /* out-expo-ish */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 180ms;
  --dur:      340ms;
  --dur-slow: 720ms;

  /* ---- Signature gradients -------------------------------- */
  --grad-bloom: radial-gradient(60% 60% at 30% 25%, #B9A3E0 0%, transparent 70%),
                radial-gradient(55% 55% at 75% 40%, #C77A8E 0%, transparent 72%),
                radial-gradient(70% 70% at 50% 85%, #6247A0 0%, transparent 75%);
  --grad-warm:  linear-gradient(150deg, #E08D6B 0%, #C2603F 48%, #8B4A63 100%);
  --grad-violet: linear-gradient(155deg, #B9A3E0 0%, #8B6FC4 45%, #4A2D5C 100%);
  --grad-dusk:  linear-gradient(160deg, #C77A8E 0%, #8B6FC4 52%, #2E2436 100%);
}

/* Dark sections opt in by class, not by media query —
   the site is a deliberate light/dark editorial rhythm. */
.on-dark {
  --bg:            var(--w-ink);
  --surface:       var(--w-ink-2);
  --surface-sunk:  #241B2B;
  --border:        var(--border-dark);
  --border-strong: rgba(245, 240, 247, 0.24);
  --text:          var(--on-dark);
  --text-2:        var(--on-dark-2);
  --text-3:        var(--on-dark-3);
  --accent:        var(--w-wisteria-lt);
  color: var(--text);
  background: var(--bg);
}