/* ============================================================
   theme_surfaces.css
   Source of truth : fonds + overlays + glow (réutilisables)
============================================================ */

:root{
  /* Couleurs de base */
  --gold: #e6d69e;

  /* ========= SURFACE : BRUN PREMIUM (sans image) ========= */
  --surface-brown-base:
    radial-gradient(900px 420px at 50% -18%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(800px 380px at 50% 120%, rgba(230,214,158,0.12), transparent 70%),
    linear-gradient(180deg, #2b190e 0%, #1c1007 55%, #2b190e 100%);

  --surface-brown-overlay:
    radial-gradient(600px 260px at 50% 10%, rgba(230,214,158,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 55%, rgba(0,0,0,0.18));

  /* ========= SURFACE : PANEL PROCESS (plus profond) ========= */
  /* On garde la même “famille” que brown, mais plus dense */
  --surface-process-base:
    radial-gradient(1000px 520px at 48% 8%, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 62%),
    radial-gradient(900px 420px at 62% 110%, rgba(230,214,158,0.10), rgba(230,214,158,0.00) 70%),
    linear-gradient(180deg, #261309 0%, #140804 55%, #24120a 100%);

  --surface-process-overlay:
    linear-gradient(115deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.07) 12%,
      rgba(255,255,255,0.14) 18%,
      rgba(255,255,255,0.06) 25%,
      rgba(255,255,255,0.00) 36%);

  /* Glow (réutilisable sur medias) */
  --surface-glow-gold:
    radial-gradient(700px 420px at 55% 45%,
      rgba(230,214,158,0.22),
      rgba(230,214,158,0.00) 70%);

  /* Borders / outlines */
  --surface-border-soft: rgba(230,214,158,0.14);
  --surface-border-strong: rgba(230,214,158,0.18);

  /* Shadows */
  --surface-shadow-soft:
    0 14px 40px rgba(0,0,0,0.32),
    inset 0 0 18px rgba(0,0,0,0.18);

  --surface-shadow-hero:
    0 34px 98px rgba(0,0,0,0.56),
    0 12px 28px rgba(0,0,0,0.30),
    0 0 0 1px rgba(230,214,158,0.08);
}