/* L02 — Color & Depth. Additive. No new hues; layered values of existing palette. */

:root {
  /* Secondary gold — warmer, coppered */
  --gold-copper: #a0733d;
  --gold-leaf-soft: hsl(36 42% 68% / 0.55);

  /* Pearl rhythm tokens */
  --pearl-warm: #EDE4D1;
  --pearl-deep: #D8CFB8;

  /* Warm layered shadows (ink-tinted, not neutral gray) */
  --shadow-warm-1: 0 1px 2px hsl(222 44% 8% / 0.08);
  --shadow-warm-2: 0 8px 24px hsl(222 44% 8% / 0.12),
                   0 2px 6px hsl(30 32% 22% / 0.10);
  --shadow-warm-float: 0 22px 48px -12px hsl(222 44% 8% / 0.28),
                       0 6px 14px hsl(30 38% 28% / 0.14),
                       0 1px 0 hsl(36 40% 92% / 0.6) inset;
}

/* ——— Section rhythm: alternating pearl wash ——— */
main > section:nth-of-type(even),
section.section-rhythm-warm {
  background-color: var(--pearl-warm);
  background-image:
    linear-gradient(to bottom,
      hsl(36 38% 88% / 0) 0%,
      hsl(36 38% 88% / 0.45) 50%,
      hsl(36 30% 80% / 0) 100%);
}

main > section:nth-of-type(even) + section:nth-of-type(odd) {
  /* subtle seam between rhythms */
  box-shadow: inset 0 1px 0 hsl(36 24% 72% / 0.35);
}

/* Deep pearl accent for tertiary sections (opt-in class) */
section.section-rhythm-deep {
  background-color: var(--pearl-deep);
}

/* ——— Hero: multi-stop gradient with atmospheric gold lift ——— */
.hero,
header.hero,
section.hero {
  background:
    radial-gradient(ellipse 60% 40% at 50% 72%,
      hsl(36 55% 58% / 0.14) 0%,
      hsl(36 55% 58% / 0.06) 40%,
      transparent 70%),
    linear-gradient(
      180deg,
      #0a1020 0%,
      #0E1524 35%,
      #121b30 62%,
      #16223a 80%,
      #1a2740 100%
    );
}

/* ——— Link underlines: two-tone gold, deepening on hover ——— */
a {
  text-decoration: underline;
  text-decoration-color: var(--accent, #B8894A);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 240ms ease,
              text-underline-offset 240ms ease,
              color 240ms ease;
}
a:hover,
a:focus-visible {
  text-decoration-color: var(--gold-copper);
  text-underline-offset: 0.22em;
}

/* ——— Selection: warm pearl on deep gold ——— */
::selection {
  background: var(--accent-deep, #8f6a36);
  color: var(--pearl-warm);
}
::-moz-selection {
  background: var(--accent-deep, #8f6a36);
  color: var(--pearl-warm);
}

/* ——— Floating element depth (portrait, headings that lift) ——— */
.portrait,
.hero img,
figure.portrait img {
  filter: drop-shadow(0 18px 28px hsl(222 44% 6% / 0.45))
          drop-shadow(0 4px 8px hsl(30 40% 22% / 0.25));
}

h1, h2 {
  text-shadow: 0 1px 0 hsl(36 40% 96% / 0.4);
}
.hero h1,
.hero h2 {
  text-shadow:
    0 1px 0 hsl(36 55% 70% / 0.08),
    0 12px 28px hsl(222 60% 4% / 0.55);
}

/* Floating cards / callouts inherit the warm float shadow */
.card,
.callout,
.float {
  box-shadow: var(--shadow-warm-float);
}

/* Ornament hooks: lighter gold for rules, dividers, filigree */
hr,
.ornament,
.rule-gold {
  border-color: var(--gold-leaf-soft);
  color: var(--gold-leaf-soft);
}