/* Theme Example 2: soft-panel visual system using shared palette tokens. */

:root[data-site-theme="theme-example-2"] {
  /* Palette aliases from colorPalette.css. */
  --p-black: var(--black);
  --p-indigo: var(--twilight-indigo);
  --p-periwinkle: var(--periwinkle);
  --p-pink: var(--neon-pink);
  --p-platinum: var(--platinum);

  /* Typography. */
  --font-body: "VT323", "Courier New", monospace;
  --font-display: "VT323", "Courier New", monospace;
  --font-size-body: 1.15rem;
  --font-size-display: 2.25rem;
  --font-size-display-mobile: 1.85rem;

  /* Core palette and interaction colors (lighter treatment than Theme 1). */
  --text: var(--p-indigo);
  --border: var(--p-periwinkle);
  --accent: var(--p-pink);
  --focus: var(--p-indigo);
  --bg: var(--p-platinum);
  --gradientTop: #fcfcff;
  --gradientBottom: rgba(175, 175, 220, 0.35);
  --link: var(--p-indigo);
  --visitedLink: #8b0053;
  --nav-link: var(--p-indigo);

  /* Header/banner styling. */
  --header-text: var(--p-indigo);
  --header-text-shadow: none;
  --header-background: linear-gradient(90deg, var(--p-platinum) 0%, rgba(175, 175, 220, 0.55) 100%);

  /* Panels and outer frame. */
  --panel-border: 1px solid var(--p-periwinkle);
  --panel-radius: 0;
  --panel-shadow: 0 1px 0 rgba(67, 67, 113, 0.16);
  --panel-bg: linear-gradient(180deg, #ffffff 0%, rgba(241, 241, 241, 0.92) 100%);
  --frame-border: 1px solid var(--p-periwinkle);
  --frame-outline: 0 solid transparent;
  --frame-radius: 0;
  --frame-shadow: 0 8px 24px rgba(67, 67, 113, 0.2);
  --container-background: linear-gradient(180deg, #ffffff 0%, rgba(241, 241, 241, 0.94) 100%);

  /* Controls and nav chips. */
  --control-radius: 0;
  --control-bg: linear-gradient(180deg, #ffffff 0%, rgba(241, 241, 241, 0.9) 100%);
  --control-bg-hover: linear-gradient(180deg, #ffffff 0%, rgba(175, 175, 220, 0.28) 100%);
  --nav-item-bg: linear-gradient(180deg, #ffffff 0%, rgba(241, 241, 241, 0.9) 100%);
  --nav-item-bg-hover: linear-gradient(180deg, #ffffff 0%, rgba(175, 175, 220, 0.28) 100%);

  /* Heading and page background treatments. */
  --section-heading-rule: 1px solid rgba(175, 175, 220, 0.9);
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(241, 241, 241, 0.78) 0 13%, transparent 14%),
    radial-gradient(circle at 88% 20%, rgba(175, 175, 220, 0.35) 0 11%, transparent 12%),
    linear-gradient(180deg, var(--p-platinum) 0%, rgba(175, 175, 220, 0.42) 100%);

  /* Drip animation palette. */
  --drip1: var(--p-periwinkle);
  --drip2: rgba(175, 175, 220, 0.6);
  --drip3: rgba(255, 0, 127, 0.44);
  --drip4: rgba(67, 67, 113, 0.72);
  --drip5: var(--p-platinum);
  --drip6: rgba(175, 175, 220, 0.8);
  --drip7: rgba(67, 67, 113, 0.52);
  --drip8: rgba(255, 0, 127, 0.35);

  /* Decorative character image placement and treatment. */
  --corner-right: -100px;
  --corner-width: clamp(470px, 78vw, 980px);
  --corner-max-height: 95vh;
  --corner-right-mobile: -68px;
  --corner-width-mobile: clamp(330px, 90vw, 620px);
  --corner-max-height-mobile: 78vh;
  --corner-opacity: 0.72;
  --corner-filter: grayscale(0.12) saturate(0.82) drop-shadow(0 8px 16px rgba(67, 67, 113, 0.28));
}

/* Dark-mode overrides while preserving Theme 2 style language. */
:root[data-site-theme="theme-example-2"][data-theme="dark"] {
  --text: var(--p-periwinkle);
  --border: var(--p-indigo);
  --accent: var(--p-pink);
  --focus: var(--p-periwinkle);
  --bg: rgba(0, 0, 0, 0.88);
  --gradientTop: var(--p-black);
  --gradientBottom: rgba(67, 67, 113, 0.94);
  --link: var(--p-platinum);
  --visitedLink: #ff8ec9;
  --nav-link: var(--p-platinum);

  --header-text: var(--p-platinum);
  --header-background: linear-gradient(90deg, rgba(67, 67, 113, 0.96) 0%, rgba(0, 0, 0, 0.92) 100%);
  --panel-border: 1px solid var(--p-indigo);
  --panel-bg: linear-gradient(180deg, rgba(67, 67, 113, 0.56) 0%, rgba(0, 0, 0, 0.72) 100%);
  --frame-border: 1px solid var(--p-indigo);
  --frame-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  --container-background: linear-gradient(180deg, rgba(67, 67, 113, 0.5) 0%, rgba(0, 0, 0, 0.64) 100%);

  --control-bg: linear-gradient(180deg, rgba(67, 67, 113, 0.72) 0%, rgba(0, 0, 0, 0.68) 100%);
  --control-bg-hover: linear-gradient(180deg, rgba(175, 175, 220, 0.42) 0%, rgba(67, 67, 113, 0.64) 100%);
  --nav-item-bg: linear-gradient(180deg, rgba(67, 67, 113, 0.66) 0%, rgba(0, 0, 0, 0.6) 100%);
  --nav-item-bg-hover: linear-gradient(180deg, rgba(175, 175, 220, 0.44) 0%, rgba(67, 67, 113, 0.64) 100%);

  --page-background:
    radial-gradient(circle at 12% 8%, rgba(175, 175, 220, 0.16) 0 12%, transparent 13%),
    radial-gradient(circle at 88% 20%, rgba(255, 0, 127, 0.1) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(67, 67, 113, 0.78) 100%);

  --drip1: var(--p-periwinkle);
  --drip2: rgba(175, 175, 220, 0.7);
  --drip3: rgba(255, 0, 127, 0.5);
  --drip4: rgba(67, 67, 113, 0.9);
  --drip5: var(--p-platinum);
  --drip6: rgba(255, 0, 127, 0.6);
  --drip7: rgba(175, 175, 220, 0.58);
  --drip8: rgba(67, 67, 113, 0.88);
}