/* ============================================================
   CommentRadar — design tokens & global styles  (v2: BOLD / PLAYFUL)
   Light-default, colorful, creator-economy energy.
   Coral lead + full rainbow, chunky cards, hard offset shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* fonts */
  --font-display: 'Gabarito', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* accent — CORAL lead, violet partner */
  --accent-h: 30;
  --accent: oklch(0.67 0.20 30);
  --accent-soft: oklch(0.67 0.20 30 / 0.14);
  --accent-bright: oklch(0.72 0.20 32);
  --accent-2: oklch(0.58 0.22 300);   /* violet partner for gradients */
  --accent-ink: #fff;

  /* full rainbow (hues) */
  --h-violet: 298;
  --h-blue: 252;
  --h-cyan: 220;
  --h-teal: 185;
  --h-green: 155;
  --h-lime: 128;
  --h-amber: 92;
  --h-orange: 55;
  --h-red: 28;
  --h-pink: 352;
  --h-magenta: 322;

  /* density */
  --density: 1;
  --gap: calc(20px * var(--density));
  --card-pad: calc(22px * var(--density));

  /* chunky radii */
  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 32px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------- LIGHT (default) -------- */
:root, [data-theme="light"] {
  --bg: oklch(0.975 0.012 80);            /* warm cream */
  --bg-grad-a: oklch(0.93 0.07 35);       /* coral wash */
  --bg-grad-b: oklch(0.93 0.07 300);      /* violet wash */
  --panel: oklch(1 0 0);
  --surface: oklch(0.995 0.006 80);
  --surface-2: oklch(0.955 0.016 80);
  --surface-hover: oklch(0.93 0.02 80);
  --ink: #18130d;                          /* warm near-black for borders / pop shadow */
  --border: oklch(0.18 0.02 60 / 0.12);
  --border-strong: oklch(0.18 0.02 60 / 0.22);
  --border-bold: var(--ink);
  --text: oklch(0.22 0.02 60);
  --text-muted: oklch(0.44 0.02 60);
  --text-faint: oklch(0.58 0.02 60);
  --shadow-1: 0 1px 2px rgba(24,19,13,.05), 0 14px 32px -20px rgba(24,19,13,.20);
  --shadow-2: 0 3px 10px rgba(24,19,13,.08), 0 34px 70px -30px rgba(24,19,13,.30);
  --shadow-pop: 4px 4px 0 var(--ink);
  --shadow-pop-lg: 7px 7px 0 var(--ink);
  --glass: oklch(1 0 0 / 0.72);
  --tint-l: 0.48;            /* lightness for colored text/icons on light bg */
  --pos: oklch(0.62 0.16 150);
  --neg: oklch(0.60 0.21 28);
  --neu: oklch(0.62 0.04 252);
  --scrim: rgba(24,19,13,0.42);
}

/* -------- DARK (toggle) -------- */
[data-theme="dark"] {
  --bg: oklch(0.17 0.012 60);
  --bg-grad-a: oklch(0.24 0.06 35);
  --bg-grad-b: oklch(0.22 0.05 300);
  --panel: oklch(0.205 0.014 60);
  --surface: oklch(0.235 0.016 60);
  --surface-2: oklch(0.275 0.018 60);
  --surface-hover: oklch(0.30 0.02 60);
  --ink: oklch(0.92 0.02 80);               /* light borders on dark */
  --border: oklch(1 0 0 / 0.12);
  --border-strong: oklch(1 0 0 / 0.2);
  --border-bold: oklch(1 0 0 / 0.5);
  --text: oklch(0.97 0.008 80);
  --text-muted: oklch(0.75 0.015 80);
  --text-faint: oklch(0.58 0.018 80);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 10px 26px -14px rgba(0,0,0,0.65);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.4), 0 28px 64px -28px rgba(0,0,0,0.8);
  --shadow-pop: 4px 4px 0 rgba(0,0,0,0.55);
  --shadow-pop-lg: 7px 7px 0 rgba(0,0,0,0.55);
  --glass: oklch(0.235 0.016 60 / 0.65);
  --tint-l: 0.82;
  --pos: oklch(0.78 0.15 150);
  --neg: oklch(0.70 0.19 28);
  --neu: oklch(0.72 0.04 252);
  --scrim: rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#root { height: 100vh; }

::selection { background: var(--accent-soft); color: var(--text); }

*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* utilities */
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); letter-spacing: -0.015em; }
.gradient-text {
  background: linear-gradient(100deg, var(--accent-bright), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* bold "pop" card: thick ink outline + hard offset shadow */
.pop {
  border: 2px solid var(--border-bold) !important;
  box-shadow: var(--shadow-pop) !important;
}
.pop-lg { border: 2.5px solid var(--border-bold) !important; box-shadow: var(--shadow-pop-lg) !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes floatCard { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot,0deg)); } }
@keyframes echoPing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }
@keyframes wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px;
}

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.cr-thumb-play:hover .cr-thumb-overlay { background: rgba(0,0,0,0.36) !important; }
.cr-thumb-play:hover .cr-thumb-overlay > div { transform: scale(1.06); transition: transform .2s var(--ease); }
@media print {
  body, html { background: #fff !important; }
  .cr-no-print { display: none !important; }
  .cr-print-main { overflow: visible !important; height: auto !important; }
  * { box-shadow: none !important; }
}
@media (max-width: 980px) {
  .echo-search { display: none !important; }
  .echo-hide-md { display: none !important; }
}
@media (max-width: 760px) {
  .echo-nav { display: none !important; }
  .echo-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .echo-float { display: none !important; }
}
@media (max-width: 880px) {
  .echo-hero-split { grid-template-columns: 1fr !important; }
  .echo-hero-split > div:last-child { display: none !important; }
}
@media (max-width: 600px) {
  .echo-hide-sm { display: none !important; }
  .echo-label-sm { display: none !important; }
  .echo-subtitle { display: none !important; }
  .echo-foot-grid { grid-template-columns: 1fr !important; }
  .echo-grid-3 { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}