/* public/css/global.css
   Spread Agency design system.
   New brand identity (blue/teal, Kanit/Anton) merged with legacy tokens. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
::selection { background: #17A4E4; color: #fff; }

:root {
  /* ---- New brand palette (drives the design) ---- */
  --bg: #0C0C0C;
  --fg: #D7E2EA;
  --fg-dim: #7FA0B5;
  --panel: #FFFFFF;
  --panel-fg: #0C0C0C;
  --panel-fg-dim: rgba(12,12,12,.62);
  --panel-border: rgba(12,12,12,.14);
  --card: #101014;
  --card-2: #15151a;
  --card-border: #D7E2EA;
  --hairline: rgba(215,226,234,.16);
  --ghost-hover: rgba(215,226,234,.12);
  --grad-head: linear-gradient(180deg,#7FA0B5 0%,#C8E6EE 100%);
  --glow: radial-gradient(circle at 50% 60%, rgba(23,164,228,.32), rgba(42,215,209,.14) 45%, transparent 70%);
  --chip: rgba(215,226,234,.06);
  --chip-border: rgba(215,226,234,.14);
  --wordmark-filter: none;
  --header: rgba(12,12,12,.72);

  /* ---- Legacy tokens kept for compatibility with old pages ---- */
  --cn: #1565D8;   /* primary  */
  --ct: #2AD7D1;   /* teal     */
  --cb: #17A4E4;   /* blue     */
  --cd: #0C0C0C;   /* dark     */
  --g1: linear-gradient(135deg,#1565D8,#2AD7D1);
  --g2: linear-gradient(135deg,#2AD7D1,#17A4E4 60%,#1565D8);
  --g3: linear-gradient(123deg,#1E2A6E 7%,#1565D8 37%,#17A4E4 72%,#2AD7D1 100%);
}

[data-theme="light"] {
  --bg: #EAF1F8;
  --fg: #16224B;
  --fg-dim: #5E6E8C;
  --panel: #0B1226;
  --panel-fg: #E6EEF7;
  --panel-fg-dim: rgba(230,238,247,.62);
  --panel-border: rgba(230,238,247,.16);
  --card: #FFFFFF;
  --card-2: #DCE7F1;
  --card-border: rgba(22,34,77,.18);
  --hairline: rgba(22,34,77,.12);
  --ghost-hover: rgba(22,34,77,.07);
  --grad-head: linear-gradient(180deg,#1565D8 0%,#17A4E4 100%);
  --glow: radial-gradient(circle at 50% 60%, rgba(23,164,228,.22), rgba(42,215,209,.12) 45%, transparent 70%);
  --chip: rgba(22,34,77,.04);
  --chip-border: rgba(22,34,77,.12);
  --wordmark-filter: brightness(0) saturate(100%) invert(13%) sepia(46%) saturate(1709%) hue-rotate(205deg) brightness(95%) contrast(92%);
  --header: rgba(234,241,248,.78);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Kanit', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background .5s ease, color .5s ease;
}

.acc-grad { background: linear-gradient(123deg,#1E2A6E 7%,#1565D8 37%,#17A4E4 72%,#2AD7D1 100%); }
.ic-moon { display: none; }
[data-theme="light"] .ic-sun { display: none; }
[data-theme="light"] .ic-moon { display: inline-flex; }

@keyframes spGlow  { 0%{opacity:.5;transform:scale(.96)} 50%{opacity:.85;transform:scale(1.05)} 100%{opacity:.5;transform:scale(.96)} }
@keyframes spFloat { 0%{transform:translateY(0)} 50%{transform:translateY(-16px)} 100%{transform:translateY(0)} }
@keyframes spPulse { 0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5)} 50%{box-shadow:0 10px 30px rgba(37,211,102,.55),0 0 0 14px rgba(37,211,102,0)} }
@keyframes spMarquee { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }

/* fade-on-scroll helper */
.fade { opacity: 0; transform: translateY(30px); transition: transform .9s cubic-bezier(.25,.1,.25,1), opacity .9s cubic-bezier(.25,.1,.25,1); }
.fade.in { opacity: 1; transform: none; }

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---- Performance: kill heavy blur on mobile (per project rule) ---- */
@media (max-width: 768px) {
  .menu-overlay, .video-play-btn, .glass-blur { backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}