/* Theme Example 1: cyanobacteria-derived visual system using shared palette tokens. */

:root[data-site-theme="theme-example-1"] {
  /* 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: "MS PGothic", sans-serif;
  --font-display: "MS PGothic", sans-serif;
  --font-size-display: 2.5rem;
  --font-size-display-mobile: 1.9rem;

  /* Core palette and interaction colors. */
  --text: var(--p-indigo);
  --border: var(--p-periwinkle);
  --accent: var(--p-pink);
  --focus: var(--p-pink);
  --bg: var(--p-platinum);
  --gradientTop: var(--p-platinum);
  --gradientBottom: rgba(241, 241, 241, 0.9);
  --link: var(--p-indigo);
  --visitedLink: #8b0053;
  --nav-link: var(--p-indigo);

  /* Header/banner styling. */
  --header-text: var(--p-platinum);
  --header-text-shadow: 1px 1px var(--text), -1px 1px var(--text), 1px -1px var(--accent), -1px -1px var(--accent);
  --header-background: linear-gradient(120deg, var(--p-platinum) 0%, var(--p-periwinkle) 45%, var(--p-indigo) 100%);

  /* Panels and outer frame. */
  --panel-border: 2px ridge var(--p-periwinkle);
  --panel-radius: 5px;
  --panel-shadow: none;
  --panel-bg: linear-gradient(var(--gradientTop), var(--gradientBottom));
  --frame-border: 6px ridge var(--p-periwinkle);
  --frame-outline: 3px solid var(--gradientTop);
  --frame-radius: 10px;
  --frame-shadow: none;
  --container-background: repeating-radial-gradient(circle at 0 0, transparent 0, var(--gradientBottom) 9px), repeating-linear-gradient(var(--bg), var(--bg));

  /* Controls and nav chips. */
  --control-radius: 5px;
  --control-bg: linear-gradient(var(--gradientTop), var(--gradientBottom));
  --control-bg-hover: linear-gradient(to right, var(--bg), var(--gradientBottom), var(--gradientTop));
  --nav-item-bg: linear-gradient(to right, var(--bg), var(--gradientBottom));
  --nav-item-bg-hover: linear-gradient(to right, var(--bg), var(--gradientBottom), var(--gradientTop));

  /* Heading and page background treatments. */
  --section-heading-rule: 2px ridge var(--p-periwinkle);
  --page-background: linear-gradient(180deg, var(--gradientTop) 0%, var(--gradientBottom) 100%);

  /* Drip animation palette. */
  --drip1: var(--p-indigo);
  --drip2: var(--p-periwinkle);
  --drip3: var(--p-pink);
  --drip4: var(--p-black);
  --drip5: var(--p-platinum);
  --drip6: var(--p-periwinkle);
  --drip7: var(--p-indigo);
  --drip8: var(--p-pink);

  /* Decorative character image placement and treatment. */
  --corner-right: -122px;
  --corner-width: clamp(540px, 90vw, 1260px);
  --corner-max-height: 100vh;
  --corner-right-mobile: -74px;
  --corner-width-mobile: clamp(435px, 100vw, 720px);
  --corner-max-height-mobile: 90vh;
  --corner-opacity: 1;
  --corner-filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

/* Dark-mode overrides while preserving Theme 1 style language. */
:root[data-site-theme="theme-example-1"][data-theme="dark"] {
  --text: var(--p-periwinkle);
  --border: var(--p-indigo);
  --accent: var(--p-pink);
  --focus: #ff8ec9;
  --bg: color-mix(in srgb, var(--p-black) 86%, var(--p-indigo));
  --gradientTop: var(--p-black);
  --gradientBottom: var(--p-indigo);
  --link: var(--p-platinum);
  --visitedLink: #ff8ec9;
  --nav-link: var(--p-platinum);

  --header-background: linear-gradient(120deg, var(--p-indigo) 0%, var(--p-black) 45%, var(--p-pink) 100%);
  --frame-border: 6px ridge var(--p-indigo);
  --panel-border: 2px ridge var(--p-indigo);

  --drip1: var(--p-platinum);
  --drip2: var(--p-periwinkle);
  --drip3: var(--p-pink);
  --drip4: var(--p-indigo);
  --drip5: var(--p-platinum);
  --drip6: var(--p-pink);
  --drip7: var(--p-periwinkle);
  --drip8: var(--p-indigo);
}