/*
 * Cosmic accents — shared, opt-in presentation utilities.
 * Structure and content stay in JSX; these rules own colour, light, and motion.
 * Add cosmic-surface to a panel, cosmic-divider to a section, cosmic-text to
 * a heading, or cosmic-action to a button. Existing primary buttons opt in below.
 */
:root,
.cosmic-theme {
  /* Shared ink and cool neutrals replace the earlier black-and-khaki palette. */
  --ink: #2b414d;
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover-foreground: var(--ink);
  --secondary-foreground: var(--ink);
  --accent-foreground: var(--ink);
  --cosmic-muted: #566875;
  --muted-foreground: var(--cosmic-muted);
  --cosmic-panel: #f7f9fc;
  --cosmic-subtle: #f0f4f9;
  --cosmic-hover: #edf2f8;
  --cosmic-selected: #e8eef6;
  --cosmic-footer: #f3f5fa;
  --cosmic-edge-soft: #d3dce5;
  --cosmic-control-edge: #7c91a2;
  --paper: var(--cosmic-panel);
  --secondary: var(--cosmic-subtle);
  --muted: var(--cosmic-subtle);
  --accent: var(--cosmic-hover);
  --border: var(--cosmic-edge-soft);
  --input: var(--cosmic-control-edge);
  --primary: #3c626c;
  --ring: #3c626c;
  --cosmic-teal: #3c626c;
  --cosmic-violet: #655375;
  --cosmic-peach: #aa7a67;
  --cosmic-edge: #bec9d0;
  --cosmic-glow: #8794bf24;
  --cosmic-button-fill: linear-gradient(112deg, #355e69, #425b72 50%, #655574);
  --cosmic-fast: 160ms;
  --cosmic-ease: cubic-bezier(.2, .7, .3, 1);
}

/* A translucent, readable surface; gradients also work without backdrop-filter.
   No layout properties here, so compact toolbars and vertical lists stay intact. */
.cosmic-theme .cosmic-surface,
.cosmic-theme .cards-first .cosmic-surface {
  border-color: var(--cosmic-edge);
  background:
    radial-gradient(ellipse at 0 0, #dceeed70, transparent 57%),
    radial-gradient(ellipse at 100% 100%, #e5dcf15c, transparent 58%),
    linear-gradient(135deg, #fffffff2, #ffffffd9);
  box-shadow: inset 0 1px 0 #fff, 0 3px 18px #60748608, 0 0 24px #9aa5c00c;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .cosmic-surface {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Static radiance separates sections without introducing visual movement. */
.cosmic-divider { position: relative; }
.cosmic-theme .cosmic-divider { border-top-color: transparent; }
.cosmic-divider::before {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, #91b9bb18, #8daebbb3 24%, #aca0c0b0 62%, #dab5a154 86%, transparent);
  box-shadow: 0 0 8px #96b5d342;
}

/* Use on display text only. Dark stops preserve contrast on the light surfaces;
   the shimmer comes from a still colour blend rather than moving letterforms. */
.cosmic-theme .cosmic-text { color: var(--cosmic-teal); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .cosmic-theme .cosmic-text {
    background: linear-gradient(110deg, #294954 5%, #3d6068 36%, #665477 72%, #795b58 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Primary actions share one fast response. The flare is a decorative overlay,
   so it cannot intercept clicks or change the button's dimensions. */
.cosmic-action,
.cosmic-theme .cosmic-primary,
.cosmic-theme .btn.primary {
  background: var(--cosmic-button-fill);
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: #fff;
  border-color: #657d90;
  box-shadow: inset 0 1px 0 #ffffff26, 0 3px 13px #7889ad21;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    background-position var(--cosmic-fast) var(--cosmic-ease),
    background-color var(--cosmic-fast) var(--cosmic-ease),
    transform var(--cosmic-fast) var(--cosmic-ease),
    box-shadow var(--cosmic-fast) var(--cosmic-ease),
    border-color var(--cosmic-fast) var(--cosmic-ease);
}

.cosmic-action::after,
.cosmic-theme .cosmic-primary::after,
.cosmic-theme .btn.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--corner);
  pointer-events: none;
  opacity: 0;
  transform: scale(.8);
  background: radial-gradient(ellipse at 50% 110%, #c7e5f14a, transparent 70%);
  transition: opacity var(--cosmic-fast) ease, transform var(--cosmic-fast) var(--cosmic-ease);
}

/* Hover lift is reserved for precise pointers; phones get a brief press response. */
@media (hover: hover) and (pointer: fine) {
  .cosmic-action:hover:not(:disabled),
  .cosmic-theme .cosmic-primary:hover:not(:disabled),
  .cosmic-theme .btn.primary:hover:not(:disabled) {
    /* Reassert the fill over the older solid-colour button hover rules. */
    background-image: var(--cosmic-button-fill);
    background-size: 180% 180%;
    background-position: 100% 50%;
    transform: translateY(-1px) scale(1.012);
    border-color: #92b9c4;
    box-shadow: 0 5px 21px #738bad50, 0 0 0 3px #bbc2de3b;
  }
  .cosmic-action:hover:not(:disabled)::after,
  .cosmic-theme .cosmic-primary:hover:not(:disabled)::after,
  .cosmic-theme .btn.primary:hover:not(:disabled)::after {
    opacity: 1;
    transform: scale(1.15);
  }
  .cosmic-theme a.cosmic-surface:hover {
    border-color: #879fae;
    box-shadow: inset 0 1px 0 #fff, 0 5px 22px var(--cosmic-glow);
  }
}

.cosmic-action:active:not(:disabled),
.cosmic-theme .cosmic-primary:active:not(:disabled),
.cosmic-theme .btn.primary:active:not(:disabled) {
  transform: scale(.99);
  box-shadow: 0 0 0 4px #a6bed329;
}
.cosmic-action:active:not(:disabled)::after,
.cosmic-theme .cosmic-primary:active:not(:disabled)::after,
.cosmic-theme .btn.primary:active:not(:disabled)::after {
  opacity: 1;
  transform: scale(1.15);
}
.cosmic-action:focus-visible,
.cosmic-theme .cosmic-primary:focus-visible,
.cosmic-theme .btn.primary:focus-visible {
  outline: 2px solid var(--cosmic-teal);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #a6bed324;
}

/* Outline modifier: reuse the shared flare, focus, and press response without
   a filled resting state. The hero and newsletter deliberately share this style. */
.cosmic-theme .cosmic-action.cosmic-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid #597384;
  box-shadow: none;
}
.cosmic-theme .cosmic-outline::after {
  background: radial-gradient(ellipse at 50% 110%, #c6bde04d, #bbdfe829 42%, transparent 76%);
}
.cosmic-outline > svg { transition: transform var(--cosmic-fast) var(--cosmic-ease); }
@media (hover: hover) and (pointer: fine) {
  .cosmic-theme .cosmic-action.cosmic-outline:hover:not(:disabled) {
    background: #edf2f840;
    border-color: #6c648b;
    color: var(--ink);
    box-shadow: 0 3px 15px #849cba24, 0 0 0 3px #b9c8df26;
  }
  .cosmic-outline:hover:not(:disabled) > svg { transform: translateX(3px); }
}
.cosmic-theme .cosmic-action.cosmic-outline:focus-visible {
  background: transparent;
  box-shadow: 0 0 0 7px #a6bed324;
}

/* Match every shared footer to the pale blue/lavender surface vocabulary. */
.cosmic-theme .footer-band {
  background: var(--cosmic-footer);
  box-shadow: 0 0 0 100vmax var(--cosmic-footer);
}
.cosmic-theme .lab-footer { color: var(--cosmic-muted); }
.cosmic-theme :is(.lab-footer-brand, .lab-footer-column h2, .lab-footer-bottom summary) {
  color: var(--ink);
}
.cosmic-theme .email-signup { border-top-color: var(--cosmic-edge-soft); }
.cosmic-theme .btn:not(.primary):not(.icon-button):not(.cosmic-outline) {
  color: var(--ink);
  border-color: var(--cosmic-control-edge);
}
.cosmic-theme .btn:not(.primary):not(.icon-button):not(.cosmic-outline):hover:not(:disabled) {
  background: var(--cosmic-hover);
  border-color: var(--cosmic-teal);
}

/* Small component adapters keep the same palette across existing inner pages.
   They do not alter selected/correct/error states, card artwork, or form behaviour. */
.cosmic-theme :is(.spread-position-preview li > span, .psychic-symbol, .content-icon) {
  border-color: #bacdd0;
  background: linear-gradient(135deg, #edf6f5, #f3eef7);
  color: #45656e;
}
.cosmic-theme .spread-recommendation-heading > span {
  color: #3e5d64;
  background: #e5efef;
}
.cosmic-theme :is(.learning-activities, .games-footer, .lab-footer-bottom) {
  border-image: linear-gradient(90deg, #b9d1d2, #c6bfd7, #d9d6ea, #dcdfe200) 1;
}
.cosmic-theme .game-panel progress::-webkit-progress-value {
  background: linear-gradient(90deg, #527b82, #847092);
}
.cosmic-theme .game-panel progress::-moz-progress-bar {
  background: linear-gradient(90deg, #527b82, #847092);
}

/* Respect OS accessibility preferences, including controls added in the future. */
@media (prefers-reduced-motion: reduce) {
  .cosmic-outline > svg, .cosmic-outline:hover:not(:disabled) > svg { transition: none; transform: none; }
  .cosmic-theme :is(.cosmic-action, .cosmic-primary, .btn.primary),
  .cosmic-theme :is(.cosmic-action, .cosmic-primary, .btn.primary)::after {
    transition: none;
    animation: none;
    transform: none;
  }
  .cosmic-theme :is(.cosmic-action, .cosmic-primary, .btn.primary):is(:hover, :active) {
    transform: none;
    background-position: 0% 50%;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cosmic-theme .cosmic-surface,
  .cosmic-theme .cards-first .cosmic-surface {
    background: #f8fafb;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .cosmic-theme .cosmic-text { background: none; color: CanvasText; }
  .cosmic-theme .cosmic-action.cosmic-outline { color: ButtonText; border-color: ButtonText; }
  .cosmic-divider::before { background: CanvasText; box-shadow: none; }
  .cosmic-action::after, .cosmic-primary::after, .btn.primary::after { display: none; }
}
@media print {
  .cosmic-theme .cosmic-text { background: none; color: #222; }
  .cosmic-theme .cosmic-surface { background: #fff; box-shadow: none; backdrop-filter: none; }
}

/* Vivid accents from the Lab Chat frame; dark ink keeps small markers readable. */
:root,.cosmic-theme{--lab-teal:#4fc7be;--lab-violet:#a080e2;--lab-rose:#e77cae;--lab-gold:#eab76b;--lab-marker-ink:#172c35}