/* ==========================================================================
   design-artdeco.css — Art Deco design language
   1920s-inspired luxury: ivory/black base with a rich gold accent,
   every surface framed by a thin gold border, a recolored diagonal
   sheen (reusing .glass's own ::before overlay mechanism instead of
   disabling it, tinted gold rather than white), a thin gold inset
   ring standing in for the usual soft shadow.
   Scoped entirely under [data-design="artdeco"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) — warm ivory base, rich gold
   accent. Reusing the ink, shadow, and radius tokens means every
   component that already reads them (text, borders, .glass's own
   box-shadow, .demo-badge, .toolbox-list) re-colors and re-shapes
   automatically — only the handful of things below need explicit
   rules. ---- */
:root[data-design="artdeco"] {
  --bg-0: #efe6d0;
  --bg-1: #f7f0dd;
  --bg-2: #fbf6ea;
  --bg-3: #fffdf7;

  --ink-rgb: 26, 22, 18;
  --focus-ring: #c9a227;

  --radius-pill: 4px;
  --radius-card: 4px;
  --radius-card-lg: 8px;
  --radius-sm: 2px;

  --shadow-soft: 0 4px 12px -4px rgba(26, 22, 18, 0.25);
  --shadow-lift: 0 8px 20px -6px rgba(26, 22, 18, 0.3);
  --shadow-inner-highlight: inset 0 0 0 1px rgba(201, 162, 39, 0.4);
}

/* ---- Palette + shadow tokens (dark) — deep charcoal/black evening
   wear, a brighter gold for contrast against black. ---- */
:root[data-design="artdeco"][data-theme="dark"] {
  --bg-0: #0f0d0a;
  --bg-1: #161310;
  --bg-2: #1d1913;
  --bg-3: #242018;

  --ink-rgb: 238, 225, 195;
  --focus-ring: #d4af37;

  --shadow-soft: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  --shadow-inner-highlight: inset 0 0 0 1px rgba(212, 175, 55, 0.5);
}

[data-design="artdeco"] .atmosphere {
  display: none;
}

/* ---- Material: flat panel framed by a gold border, no blur. The
   diagonal sheen overlay is recolored (not disabled like every other
   design here) — a subtle gold diagonal instead of glass's white one,
   reusing the same ::before mechanism glass.css already sets up. ---- */
[data-design="artdeco"] .glass::before {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, transparent 35%, transparent 65%, rgba(201, 162, 39, 0.1) 100%);
  mix-blend-mode: normal;
}

[data-design="artdeco"] .glass-ultra,
[data-design="artdeco"] .glass-floating,
[data-design="artdeco"] .glass-frosted {
  background: var(--bg-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid var(--focus-ring);
}

/* ---- Buttons: solid gold block with a fine dark frame; outlined
   gold for the secondary action. ---- */
[data-design="artdeco"] .btn-primary {
  background: var(--focus-ring);
  color: #1a1612;
  border: 1px solid rgba(var(--ink-rgb), 1);
  box-shadow: var(--shadow-soft);
}

[data-design="artdeco"] .btn-secondary {
  background: transparent;
  border: 1.5px solid var(--focus-ring);
  color: var(--focus-ring);
}

/* ---- Hero orb: kept circular — Deco's sunburst motifs are
   themselves circular/radial. Gold ring frame, soft gold wash instead
   of the cyan/peach glass tint, no glass gloss highlight (replaced by
   the gold-tinted sheen above). ---- */
[data-design="artdeco"] .hero-orb.glass {
  background: var(--bg-3);
  border: 2px solid var(--focus-ring);
  box-shadow: var(--shadow-lift);
}

[data-design="artdeco"] .hero-orb__tint {
  background: radial-gradient(circle at 30% 28%, rgba(201, 162, 39, 0.16), transparent 55%);
}

[data-design="artdeco"] .hero-orb__highlight {
  display: none;
}

/* ---- Project card visual/monogram area: same cyan/peach glass wash
   as the hero orb's tint, invisible against a flat panel. A plain
   bordered block + a more opaque monogram reads clearly instead. ---- */
[data-design="artdeco"] .project-card__visual {
  background: var(--bg-2);
  border: 1px solid rgba(var(--ink-rgb), 0.15);
}

[data-design="artdeco"] .project-card__monogram {
  color: rgba(var(--ink-rgb), 0.4);
}

/* ---- Cosmetic surfaces ---- */
[data-design="artdeco"] .demo-badge {
  background: transparent;
  border: 1px solid var(--focus-ring);
  color: var(--focus-ring);
}

[data-design="artdeco"] .toolbox-list li {
  background: var(--bg-3);
  border: 1px solid var(--focus-ring);
}