/*
  Extra card templates.
  The base CeCycle Signature template is intentionally unchanged in styles.css.
*/

.ecard[class*="template-"] {
  --template-primary: var(--ce-forest);
  --template-secondary: var(--ce-blue);
}

.template-executive-slate {
  --ink: #111827;
  --muted: #4b5563;
  --ce-forest: #111827;
  --ce-teal: #334155;
  --ce-blue: #94a3b8;
  --ce-leaf: #d4af37;
  --panel: rgba(255, 255, 255, 0.22);
}

.template-executive-slate .photo-panel {
  background:
    radial-gradient(circle at 78% 12%, rgba(148, 163, 184, 0.22), transparent 34%),
    repeating-linear-gradient(116deg, rgba(17, 24, 39, 0.055) 0 1px, transparent 1px 112px),
    linear-gradient(180deg, #f8fafc, #eef2f7);
}

.template-executive-slate .save-button {
  background: linear-gradient(135deg, #111827, #334155 58%, #d4af37);
}

.template-ocean-glass {
  --ink: #0b2239;
  --muted: #36566e;
  --ce-forest: #0f4c81;
  --ce-teal: #0b6b8f;
  --ce-blue: #22d3ee;
  --ce-leaf: #2dd4bf;
  --panel: rgba(232, 248, 255, 0.32);
}

.template-ocean-glass .photo-panel {
  background:
    radial-gradient(circle at 20% 18%, rgba(34, 211, 238, 0.2), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(45, 212, 191, 0.18), transparent 32%),
    linear-gradient(180deg, #f6fcff, #eaf7fb);
}

.template-ocean-glass .save-button {
  background: linear-gradient(135deg, #0f4c81, #0ea5e9 62%, #22d3ee);
}

.template-emerald-eco {
  --ink: #13231b;
  --muted: #3f5b4a;
  --ce-forest: #14532d;
  --ce-teal: #166534;
  --ce-blue: #86efac;
  --ce-leaf: #84cc16;
  --panel: rgba(240, 253, 244, 0.3);
}

.template-emerald-eco .photo-panel {
  background:
    radial-gradient(circle at 72% 22%, rgba(132, 204, 22, 0.18), transparent 28%),
    radial-gradient(circle at 0 90%, rgba(20, 83, 45, 0.11), transparent 30%),
    repeating-linear-gradient(116deg, rgba(22, 101, 52, 0.055) 0 1px, transparent 1px 116px),
    linear-gradient(180deg, #fbfff9, #edf8ef);
}

.template-emerald-eco .save-button {
  background: linear-gradient(135deg, #14532d, #15803d 58%, #84cc16);
}

.template-graphite-minimal {
  --ink: #18181b;
  --muted: #52525b;
  --ce-forest: #18181b;
  --ce-teal: #3f3f46;
  --ce-blue: #a1a1aa;
  --ce-leaf: #71717a;
  --panel: rgba(255, 255, 255, 0.28);
}

.template-graphite-minimal .photo-panel {
  background:
    linear-gradient(116deg, rgba(24, 24, 27, 0.045) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, #ffffff, #f4f4f5);
}

.template-graphite-minimal .save-button {
  background: linear-gradient(135deg, #18181b, #3f3f46);
}

.template-copper-luxe {
  --ink: #2d1f18;
  --muted: #665044;
  --ce-forest: #3b2418;
  --ce-teal: #7c3f21;
  --ce-blue: #d7a36f;
  --ce-leaf: #c47a3c;
  --panel: rgba(255, 248, 240, 0.34);
}

.template-copper-luxe .photo-panel {
  background:
    radial-gradient(circle at 84% 18%, rgba(196, 122, 60, 0.2), transparent 30%),
    linear-gradient(116deg, rgba(59, 36, 24, 0.052) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, #fffaf5, #f5ece4);
}

.template-copper-luxe .save-button {
  background: linear-gradient(135deg, #3b2418, #8a4b2a 58%, #c47a3c);
}

.template-blue-corporate {
  --ink: #0b1f33;
  --muted: #41546a;
  --ce-forest: #123c69;
  --ce-teal: #1f5f99;
  --ce-blue: #2f80ed;
  --ce-leaf: #56ccf2;
  --panel: rgba(239, 246, 255, 0.3);
}

.template-blue-corporate .photo-panel {
  background:
    radial-gradient(circle at 78% 20%, rgba(47, 128, 237, 0.18), transparent 30%),
    linear-gradient(116deg, rgba(18, 60, 105, 0.055) 0 1px, transparent 1px 118px),
    linear-gradient(180deg, #f8fbff, #edf4fc);
}

.template-blue-corporate .save-button {
  background: linear-gradient(135deg, #123c69, #1f5f99 60%, #2f80ed);
}

.template-ivory-editorial {
  --ink: #2f2a1f;
  --muted: #665f52;
  --ce-forest: #2f2a1f;
  --ce-teal: #6b5f43;
  --ce-blue: #d8c68d;
  --ce-leaf: #b89b5e;
  --panel: rgba(255, 255, 255, 0.34);
}

.template-ivory-editorial .photo-panel {
  background:
    radial-gradient(circle at 15% 12%, rgba(184, 155, 94, 0.16), transparent 26%),
    linear-gradient(116deg, rgba(47, 42, 31, 0.045) 0 1px, transparent 1px 122px),
    linear-gradient(180deg, #fffdf7, #f4f0e4);
}

.template-ivory-editorial .save-button {
  background: linear-gradient(135deg, #2f2a1f, #6b5f43 58%, #b89b5e);
}

.template-tech-neon {
  --ink: #0f172a;
  --muted: #475569;
  --ce-forest: #0b1020;
  --ce-teal: #1e3a8a;
  --ce-blue: #38bdf8;
  --ce-leaf: #a78bfa;
  --panel: rgba(248, 250, 252, 0.28);
}

.template-tech-neon .photo-panel {
  background:
    radial-gradient(circle at 84% 18%, rgba(56, 189, 248, 0.2), transparent 28%),
    radial-gradient(circle at 12% 80%, rgba(167, 139, 250, 0.14), transparent 30%),
    repeating-linear-gradient(116deg, rgba(15, 23, 42, 0.06) 0 1px, transparent 1px 92px),
    linear-gradient(180deg, #f8fbff, #eef4ff);
}

.template-tech-neon .save-button {
  background: linear-gradient(135deg, #0b1020, #1e3a8a 55%, #38bdf8);
}

.template-clean-white {
  --ink: #0f172a;
  --muted: #475569;
  --ce-forest: #0f172a;
  --ce-teal: #1d4ed8;
  --ce-blue: #2563eb;
  --ce-leaf: #14b8a6;
  --panel: rgba(255, 255, 255, 0.42);
}

.template-clean-white .photo-panel {
  background:
    radial-gradient(circle at 88% 16%, rgba(37, 99, 235, 0.12), transparent 28%),
    linear-gradient(116deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 118px),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.template-clean-white .save-button {
  background: linear-gradient(135deg, #0f172a, #2563eb);
}

.template-deep-green {
  --ink: #102a1f;
  --muted: #3f5a4f;
  --ce-forest: #102a1f;
  --ce-teal: #14532d;
  --ce-blue: #4ade80;
  --ce-leaf: #22c55e;
  --panel: rgba(240, 253, 244, 0.28);
}

.template-deep-green .photo-panel {
  background:
    radial-gradient(circle at 78% 18%, rgba(74, 222, 128, 0.16), transparent 30%),
    radial-gradient(circle at 10% 88%, rgba(16, 42, 31, 0.1), transparent 28%),
    repeating-linear-gradient(116deg, rgba(16, 42, 31, 0.055) 0 1px, transparent 1px 118px),
    linear-gradient(180deg, #fbfff9, #edf7ef);
}

.template-deep-green .save-button {
  background: linear-gradient(135deg, #102a1f, #166534 56%, #22c55e);
}

.ecard:not(.template-cecycle-signature) .qr-card h1::after {
  background: linear-gradient(90deg, var(--ce-leaf), var(--ce-blue));
}

.ecard:not(.template-cecycle-signature) .quick-actions svg {
  color: var(--ce-teal);
}

.ecard:not(.template-cecycle-signature) .share-row button {
  background: var(--ce-forest);
}

.ecard:not(.template-cecycle-signature) .share-row button + button {
  background: color-mix(in srgb, var(--ce-blue), white 82%);
  color: var(--ce-forest);
}