/* Pink Aurora Glass theme — loaded last (design/THEME-SPEC.md).
   D structure (frosted glass, aurora, gradient CTA, solid signal badges) + H colour (hot pink + lilac). */

/* ---------- tokens: light ---------- */
:root {
  --bg: #fff4f9;
  --card: rgba(255, 255, 255, .82);
  --ink: #2a0f2c;
  --mute: #5f4463;
  --line: rgba(190, 60, 140, .20);
  --soft: rgba(238, 31, 134, .10);
  --accent: #ff3e9d;
  --accent-ink: #ad0060;
  --accent-bg: #d6136f;
  --lav: #f0ebff;
  --lav-ink: #4320b0;
  --mint: #e3f7ee;
  --mint-ink: #0e6e43;
  --sky: #ece9ff;
  --amber-1: #fff3d6;
  --amber-ink: #7a4f00;
  --sig-few: #13804f;
  --sig-some: #855600;
  --sig-many: #c01d2e;
  --radius: 24px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .55), 0 22px 44px -26px rgba(200, 20, 110, .45);

  --acc2: #9b7bff;
  --acc2-bg: rgba(155, 123, 255, .14);
  --glass: blur(22px) saturate(160%);
  --cta: linear-gradient(120deg, #d6136f, #a52fd6 55%, #7a4fe6);
  --cta-glow: 0 10px 22px -10px #ee1f86;
  --sel: linear-gradient(120deg, rgba(238, 31, 134, .16), rgba(155, 123, 255, .20));
  --chip-bg: rgba(255, 255, 255, .55);
  --sig-text: #fff;
  --ribbon: rgba(42, 15, 44, .92);
  --aurora:
    radial-gradient(60rem 30rem at 0% -5%, rgba(255, 62, 157, .18), transparent 62%),
    radial-gradient(50rem 28rem at 105% 10%, rgba(155, 123, 255, .20), transparent 62%),
    radial-gradient(50rem 26rem at 30% 105%, rgba(255, 150, 200, .16), transparent 62%);
  --halo-a: rgba(255, 62, 157, .18);
  --halo-b: rgba(155, 123, 255, .20);
  --gloss: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
  --hair: color-mix(in srgb, var(--line) 70%, transparent);
  --chip-lift: 0 2px 0 color-mix(in srgb, var(--acc2) 35%, transparent);
  --confetti-1: #ff3e9d; --confetti-2: #9b7bff; --confetti-3: #ffb0d6; --confetti-4: #c9b8ff;
  --gp3d-droplet-glow: color-mix(in srgb, #ff3e9d 55%, #9b7bff);
  color-scheme: light;
}

/* ---------- tokens: dark (same values under both selectors) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #150818;
    --card: rgba(40, 16, 44, .82);
    --ink: #fff0f8;
    --mute: #d2b0cf;
    --line: rgba(255, 255, 255, .12);
    --soft: rgba(255, 111, 181, .16);
    --accent: #ff6fb5;
    --accent-ink: #ff9fcd;
    --accent-bg: #d6136f;
    --lav: #2a2148;
    --lav-ink: #c9b8ff;
    --mint: #11291f;
    --mint-ink: #5fe0a5;
    --sky: #211a3a;
    --amber-1: #2d2410;
    --amber-ink: #ffd05c;
    --sig-few: #5fe0a5;
    --sig-some: #ffd05c;
    --sig-many: #ff8f9d;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 50px -26px rgba(0, 0, 0, .95), 0 0 60px -22px rgba(255, 62, 157, .45);
    --acc2: #b7a0ff;
    --acc2-bg: rgba(183, 160, 255, .14);
    --sel: linear-gradient(120deg, rgba(255, 62, 157, .26), rgba(155, 123, 255, .26));
    --chip-bg: rgba(255, 255, 255, .05);
    --sig-text: #150818;
    --ribbon: rgba(42, 15, 44, .92);
    --aurora:
      radial-gradient(60rem 30rem at 0% -5%, rgba(238, 31, 134, .26), transparent 62%),
      radial-gradient(50rem 28rem at 105% 10%, rgba(155, 123, 255, .20), transparent 62%),
      radial-gradient(50rem 26rem at 30% 105%, rgba(255, 62, 157, .12), transparent 62%);
    --halo-a: rgba(238, 31, 134, .26);
    --halo-b: rgba(155, 123, 255, .20);
    --gloss: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #150818;
  --card: rgba(40, 16, 44, .82);
  --ink: #fff0f8;
  --mute: #d2b0cf;
  --line: rgba(255, 255, 255, .12);
  --soft: rgba(255, 111, 181, .16);
  --accent: #ff6fb5;
  --accent-ink: #ff9fcd;
  --accent-bg: #d6136f;
  --lav: #2a2148;
  --lav-ink: #c9b8ff;
  --mint: #11291f;
  --mint-ink: #5fe0a5;
  --sky: #211a3a;
  --amber-1: #2d2410;
  --amber-ink: #ffd05c;
  --sig-few: #5fe0a5;
  --sig-some: #ffd05c;
  --sig-many: #ff8f9d;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 50px -26px rgba(0, 0, 0, .95), 0 0 60px -22px rgba(255, 62, 157, .45);
  --acc2: #b7a0ff;
  --acc2-bg: rgba(183, 160, 255, .14);
  --sel: linear-gradient(120deg, rgba(255, 62, 157, .26), rgba(155, 123, 255, .26));
  --chip-bg: rgba(255, 255, 255, .05);
  --sig-text: #150818;
  --ribbon: rgba(42, 15, 44, .92);
  --aurora:
    radial-gradient(60rem 30rem at 0% -5%, rgba(238, 31, 134, .26), transparent 62%),
    radial-gradient(50rem 28rem at 105% 10%, rgba(155, 123, 255, .20), transparent 62%),
    radial-gradient(50rem 26rem at 30% 105%, rgba(255, 62, 157, .12), transparent 62%);
  --halo-a: rgba(238, 31, 134, .26);
  --halo-b: rgba(155, 123, 255, .20);
  --gloss: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  color-scheme: dark;
}

/* ---------- aurora (static, behind everything) ---------- */
body { background: var(--bg); }
body::before { inset: 0; height: auto; background: var(--aurora); }

/* ---------- type (Pretendard only) ---------- */
h1 { font-size: 1.9rem; font-weight: 850; letter-spacing: -.035em; line-height: 1.15; }
h2 { font-size: 1.25rem; font-weight: 750; letter-spacing: -.015em; }
@media (min-width: 760px) { h1 { font-size: 2.4rem; } }
.eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--accent-ink); }

/* ---------- glass surfaces ---------- */
.card,
.tab-ask .ak-answer,
.gp-settings {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
}
.gp-settings { border-radius: 20px; }
.top-btn {
  background: var(--card);
  border: 0;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
}
.input, select.input { background: var(--card); border: 1px solid var(--line); }
dialog.pal { --halo-a: rgba(255, 62, 157, .30); }

/* ---------- ribbon ---------- */
.ribbon { background: var(--ribbon); color: #fff; }

/* ---------- tabs nav ---------- */
.tabs {
  background: var(--bg);
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .tabs { border: 0; box-shadow: var(--shadow); }
}
.tabs a[aria-current="page"] { background: var(--sel); color: var(--accent-ink); }
.tabs a span { font-size: 1.15rem; filter: saturate(.75); opacity: .85; transition: filter .2s, opacity .2s; }
.tabs a[aria-current="page"] span { filter: none; opacity: 1; }
@media (min-width: 760px) { .tabs a span { font-size: 1rem; } }

/* ---------- buttons ---------- */
.btn {
  background: var(--cta);
  color: #fff;
  box-shadow: var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition-timing-function: var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--acc2-bg); color: var(--accent-ink); border: 1px solid var(--line); box-shadow: none; }
.btn.soft { background: var(--soft); color: var(--accent-ink); box-shadow: none; }

/* ---------- chips ---------- */
.chip {
  border: 1px solid var(--line);
  background: var(--chip-bg);
  transition-timing-function: var(--ease-out);
}
.chip[aria-pressed="true"] { background: var(--sel); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* ---------- signal badges: always solid ---------- */
.signal { color: var(--sig-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signal { color: var(--sig-text); } }
:root[data-theme="dark"] .signal { color: var(--sig-text); }

/* ---------- small bits ---------- */
.toolchip { background: var(--acc2-bg); color: var(--lav-ink); }
.toast { background: var(--ribbon); color: #fff; }