/* ============================================================
   Portal 3 — Stone swatch presets
   Each .sw--<id> sets the swatch background gradients via
   CSS custom properties (--sw-bg / --sw-img).
   Drop the class on any `.swatch` / `.sw` / `.plate` element.
   ============================================================ */

/* Calacatta Oro — warm white with golden veining */
.sw--cal-oro {
  --sw-bg: #f5efe0;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #b8954055 0%, transparent 42%),
    radial-gradient(ellipse at 70% 60%, #b8954040 0%, transparent 38%),
    radial-gradient(ellipse at 20% 80%, #b8954030 0%, transparent 50%),
    repeating-linear-gradient(28deg, #b8954010 0 1px, transparent 1px 6px),
    repeating-linear-gradient(84deg, #b8954008 0 1px, transparent 1px 12px),
    linear-gradient(135deg, #f5efe0 0%, #ebe2cd 100%);
}

/* Carrara Bianco — cool grey-white with thin veining */
.sw--car-bia {
  --sw-bg: #e8e8e4;
  --sw-img:
    radial-gradient(ellipse at 25% 35%, #a8a8a855 0%, transparent 42%),
    radial-gradient(ellipse at 75% 65%, #8e8e8e40 0%, transparent 38%),
    repeating-linear-gradient(35deg, #88888810 0 1px, transparent 1px 6px),
    repeating-linear-gradient(105deg, #88888808 0 1px, transparent 1px 12px),
    linear-gradient(135deg, #e8e8e4 0%, #d6d6d2 100%);
}

/* Statuario Extra — pure white with bold grey veins */
.sw--sta-ext {
  --sw-bg: #f4f3ee;
  --sw-img:
    radial-gradient(ellipse at 40% 30%, #5a5a5a55 0%, transparent 42%),
    radial-gradient(ellipse at 60% 70%, #5a5a5a40 0%, transparent 38%),
    repeating-linear-gradient(20deg, #5a5a5a10 0 1px, transparent 1px 8px),
    linear-gradient(135deg, #f4f3ee 0%, #e8e6df 100%);
}

/* Nero Marquina — dramatic black with white veins */
.sw--ner-mar {
  --sw-bg: #1a1a1a;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #ffffff55 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #ffffff40 0%, transparent 38%),
    radial-gradient(ellipse at 50% 80%, #ffffff20 0%, transparent 50%),
    repeating-linear-gradient(45deg, #ffffff08 0 1px, transparent 1px 8px),
    linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* Taj Mahal — soft beige */
.sw--taj-mah {
  --sw-bg: #e8dec9;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #b8a48055 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #b8a48040 0%, transparent 38%),
    repeating-linear-gradient(28deg, #a08c6810 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #e8dec9 0%, #d9cbb0 100%);
}

/* Verde Alpi — deep green with white veining */
.sw--ver-alp {
  --sw-bg: #2a3d33;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #d6ddc955 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #d6ddc940 0%, transparent 38%),
    repeating-linear-gradient(35deg, #d6ddc910 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #2a3d33 0%, #3a5044 100%);
}

/* Onyx Miele — honey-amber translucence */
.sw--ony-mie {
  --sw-bg: #d9a85f;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #c2742855 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #c2742840 0%, transparent 38%),
    radial-gradient(ellipse at 50% 80%, #f4d18840 0%, transparent 50%),
    repeating-linear-gradient(35deg, #ffffff10 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #d9a85f 0%, #b8842c 100%);
}

/* Travertine Walnut */
.sw--tra-wal {
  --sw-bg: #b69770;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #6c4f2f55 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #6c4f2f40 0%, transparent 38%),
    repeating-linear-gradient(8deg, #6c4f2f10 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #b69770 0%, #9a7e55 100%);
}

/* Brasiliano Quartzite — silvery white */
.sw--bra-qua {
  --sw-bg: #e3e2dc;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #888e8c55 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #888e8c40 0%, transparent 38%),
    repeating-linear-gradient(28deg, #6b7173 10 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #e3e2dc 0%, #cccdc6 100%);
}

/* Crema Marfil */
.sw--cre-mar {
  --sw-bg: #ead9b5;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #a68e5a55 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #a68e5a40 0%, transparent 38%),
    repeating-linear-gradient(28deg, #8c7a4810 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #ead9b5 0%, #d6c293 100%);
}

/* Granito Negro */
.sw--gra-nro {
  --sw-bg: #1a1d1f;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #5a5e6055 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #5a5e6040 0%, transparent 38%),
    repeating-linear-gradient(45deg, #ffffff08 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #1a1d1f 0%, #2a2e30 100%);
}

/* Barge Grigio */
.sw--bar-gri {
  --sw-bg: #b4b3ad;
  --sw-img:
    radial-gradient(ellipse at 30% 40%, #6b6a6555 0%, transparent 42%),
    radial-gradient(ellipse at 70% 65%, #6b6a6540 0%, transparent 38%),
    repeating-linear-gradient(35deg, #4f4d4810 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #b4b3ad 0%, #9a9890 100%);
}

/* Generic fallback */
.sw--default {
  --sw-bg: #e3e1da;
  --sw-img: linear-gradient(135deg, #e3e1da 0%, #d2cfc4 100%);
}