/* ═══════════════════════════════════════════════════
   Bynefit Inc. — Design Tokens  (brand.css)
   Single source of truth for all visual variables.
   Import via <link rel="stylesheet" href="/dev/brand.css">
═══════════════════════════════════════════════════ */

:root {

  /* ── Backgrounds ─────────────────────────────── */
  --ink:    #0e1726;   /* page · darkest surface    */
  --ink2:   #162236;   /* section alternating bg    */
  --ink3:   #1e2e48;   /* card bg                   */
  --ink4:   #243452;   /* raised surface · hover    */

  /* ── Text ────────────────────────────────────── */
  --chalk:  #f4f6f0;
  --muted:  rgba(244,246,240,.38);
  --muted2: rgba(244,246,240,.60);
  --muted3: rgba(244,246,240,.20);

  /* ── Borders ─────────────────────────────────── */
  --border:  rgba(244,246,240,.09);
  --border2: rgba(244,246,240,.14);

  /* ── Brand colours ───────────────────────────── */
  --lime:   #c8f135;   /* primary action · growth   */
  --sky:    #3ab6ff;   /* tech · Bynli platform     */
  --coral:  #ff5533;   /* urgency · passion         */
  --gold:   #f5a623;   /* excellence · milestones   */

  /* ── Tints — bg washes ───────────────────────── */
  --lime-wash:   rgba(200,241,53,.05);
  --lime-glow:   rgba(200,241,53,.12);
  --lime-ring:   rgba(200,241,53,.18);
  --sky-wash:    rgba(58,182,255,.07);
  --sky-glow:    rgba(58,182,255,.12);
  --sky-ring:    rgba(58,182,255,.18);
  --coral-wash:  rgba(255,85,51,.07);
  --coral-glow:  rgba(255,85,51,.12);
  --coral-ring:  rgba(255,85,51,.18);
  --gold-wash:   rgba(245,166,35,.07);
  --gold-glow:   rgba(245,166,35,.12);
  --gold-ring:   rgba(245,166,35,.18);

  /* ── Typography ──────────────────────────────── */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* ── Border radii ────────────────────────────── */
  --r-xs:   0.5rem;
  --r-sm:   0.75rem;
  --r-md:   1.25rem;
  --r-lg:   1.75rem;
  --r-xl:   2.5rem;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:         0 1px 3px rgba(0,0,0,.35);
  --shadow-md:         0 4px 16px rgba(0,0,0,.30);
  --shadow-card:       0 1px 3px rgba(0,0,0,.40), 0 8px 32px rgba(0,0,0,.20);
  --shadow-glow-lime:  0 0 48px rgba(200,241,53,.18);
  --shadow-glow-sky:   0 0 48px rgba(58,182,255,.18);
  --shadow-glow-coral: 0 0 48px rgba(255,85,51,.15);

  /* ── Gradients ───────────────────────────────── */
  --grad-page:  linear-gradient(180deg, var(--ink) 0%, var(--ink2) 100%);
  --grad-hero:  radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,241,53,.07) 0%, transparent 70%);
  --grad-lime:  linear-gradient(135deg, #c8f135 0%, #a8d420 100%);
  --grad-sky:   linear-gradient(135deg, #3ab6ff 0%, #1a8fe0 100%);

  /* ── Motion ──────────────────────────────────── */
  --ease-smooth:    cubic-bezier(0.32,0.72,0,1);
  --ease-out-expo:  cubic-bezier(0.16,1,0.3,1);
  --dur-fast:       200ms;
  --dur-base:       400ms;
  --dur-slow:       800ms;

  /* ── Light surface (hero + marquee) ──────────── */
  /* A warm cream palette for donor-facing sections; keeps brand accents
     readable against light. Applied by scoping to .surface-light. */
  --cream:       #f7f1e3;   /* primary hero background       */
  --cream2:      #efe6d2;   /* subtle card well              */
  --cream3:      #e7dcc1;   /* divider / border on cream     */
  --ink-warm:    #1a1220;   /* body + headline on cream      */
  --ink-soft:    #4a3f4f;   /* muted copy on cream           */
  --ink-whisper: #7a6f80;   /* extra-quiet labels on cream   */
  --coral-deep:  #d93a1a;   /* accent readable on cream      */
  --lime-deep:   #6a8416;   /* lime variant readable on cream*/
  --sky-deep:    #1a6fb8;   /* sky variant readable on cream */
  --gold-deep:   #b37511;   /* gold variant readable on cream*/
}

/* ═══════════════════════════════════════════════════
   .surface-light — opt-in light scope.
   Put it on a section (or the <main>) to flip tokens
   *inside that subtree* without redesigning the rest.
═══════════════════════════════════════════════════ */
.surface-light {
  --ink:     var(--cream);
  --ink2:    var(--cream2);
  --ink3:    var(--cream2);
  --ink4:    var(--cream3);
  --chalk:   var(--ink-warm);
  --muted:   var(--ink-whisper);
  --muted2:  var(--ink-soft);
  --muted3:  rgba(26,18,32,.20);
  --border:  rgba(26,18,32,.08);
  --border2: rgba(26,18,32,.14);
  /* Remap brand accents to readable "deep" variants on cream.
     Keeps color splashes (orange, blue, green, gold) but with contrast. */
  --lime:  var(--lime-deep);
  --sky:   var(--sky-deep);
  --coral: var(--coral-deep);
  --gold:  var(--gold-deep);
  background: var(--cream);
  color: var(--ink-warm);
}
.surface-light .bezel { background: var(--cream3); }
.surface-light .bezel-inner { background: #fffdf6; box-shadow: inset 0 1px 1px rgba(26,18,32,.04), 0 1px 3px rgba(26,18,32,.06); }
.surface-light .spotlight::before { background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(217,58,26,.10), transparent 60%); }