/* ============================================================
   PIAF ALIGNMENT STUDIO — GRADIENT SURFACE TOKENS
   Gradients are a first-class surface treatment, not decoration:
   a gentle tonal shift across the warm spine (and a faint clay
   wash for accent panels). Stops sit close in tone so the result
   reads as quiet light, never an obvious "gradient effect".

   Theme-reactive by design: only the *-from / *-to stops are
   redefined per mode; the composite linear/diagonal/radial vars
   reference those stops and re-resolve automatically.

   ── TEXT-OVER-GRADIENT CONTRAST (checked against BOTH stops) ──
   LIGHT  --gradient-surface (#D9C6B0 → #C1A685)
     • --text        (spine-900)  9.49 / 6.79  AA ✓  ← use for body
     • --text-subtle (spine-700)  5.69 / 4.07  AA / AA-large
                                   → headings & large text only
     • --text-muted  (spine-600)  3.69 / 2.64  FAIL ✗
                                   → DO NOT place muted text on this wash
   LIGHT  --gradient-accent (#EAD3CA → #DEB6A6)
     • --text        ~12 / ~10  AA ✓ (safe)
   DARK   --gradient-surface (#341D17 → #1D1311)
     • --text (spine-50)    14.1 / 16.3  AA ✓
     • --text-muted (spine-400) 6.79 / 7.86  AA ✓ (safe)
   DARK   --gradient-accent (#522921 → #381C17)
     • --text (cream) / --accent-text (clay-300)  AA ✓ (both safe)
   ============================================================ */

:root,
[data-theme="light"] {
  /* gradient stops — light */
  --gradient-surface-from: var(--spine-300); /* #D9C6B0 warm sand */
  --gradient-surface-to:   var(--spine-400); /* #C1A685 camel     */
  --gradient-accent-from:  var(--clay-100);  /* #EAD3CA */
  --gradient-accent-to:    var(--clay-200);  /* #DEB6A6 */

  /* composites — light (declared in-scope so they resolve correctly
     per theme; reference the theme-independent ramp stops directly) */
  --gradient-surface:          linear-gradient(180deg, var(--spine-300) 0%, var(--spine-400) 100%);
  --gradient-surface-diagonal: linear-gradient(135deg, var(--spine-300) 0%, var(--spine-400) 100%);
  --gradient-surface-radial:   radial-gradient(120% 96% at 50% 0%, var(--spine-300) 0%, var(--spine-400) 100%);
  --gradient-accent:           linear-gradient(180deg, var(--clay-100) 0%, var(--clay-200) 100%);
  --gradient-accent-diagonal:  linear-gradient(135deg, var(--clay-100) 0%, var(--clay-200) 100%);
  --gradient-accent-radial:    radial-gradient(120% 96% at 50% 0%, var(--clay-100) 0%, var(--clay-200) 100%);
}

[data-theme="dark"] {
  /* gradient stops — dark (deep warm wash across the brown end) */
  --gradient-surface-from: var(--spine-900); /* #341D17 espresso   */
  --gradient-surface-to:   var(--spine-950); /* #1D1311 near-black  */
  --gradient-accent-from:  var(--clay-900);  /* #522921 */
  --gradient-accent-to:    var(--clay-950);  /* #381C17 */

  /* composites — dark */
  --gradient-surface:          linear-gradient(180deg, var(--spine-900) 0%, var(--spine-950) 100%);
  --gradient-surface-diagonal: linear-gradient(135deg, var(--spine-900) 0%, var(--spine-950) 100%);
  --gradient-surface-radial:   radial-gradient(120% 96% at 50% 0%, var(--spine-900) 0%, var(--spine-950) 100%);
  --gradient-accent:           linear-gradient(180deg, var(--clay-900) 0%, var(--clay-950) 100%);
  --gradient-accent-diagonal:  linear-gradient(135deg, var(--clay-900) 0%, var(--clay-950) 100%);
  --gradient-accent-radial:    radial-gradient(120% 96% at 50% 0%, var(--clay-900) 0%, var(--clay-950) 100%);
}

/* ------------------------------------------------------------
   Convenience utility classes (for non-Tailwind consumers).
   Tailwind users get bg-gradient-surface / bg-gradient-accent
   (+ -diagonal / -radial) from tailwind.theme.css.
   ------------------------------------------------------------ */
.bg-gradient-surface          { background-image: var(--gradient-surface); }
.bg-gradient-surface-diagonal { background-image: var(--gradient-surface-diagonal); }
.bg-gradient-surface-radial   { background-image: var(--gradient-surface-radial); }
.bg-gradient-accent           { background-image: var(--gradient-accent); }
.bg-gradient-accent-diagonal  { background-image: var(--gradient-accent-diagonal); }
.bg-gradient-accent-radial    { background-image: var(--gradient-accent-radial); }