/* ==========================================================================
   AGENDA Landing — design tokens + base
   ========================================================================== */

@font-face {
  font-family: 'Gmarket Sans';
  src: url('assets/fonts/GmarketSansLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('assets/fonts/GmarketSansMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('assets/fonts/GmarketSansBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand red */
  --red-50:  #FDF2F2;
  --red-100: #FBE0E1;
  --red-500: #DC3B40;
  --red-600: #D8232A;
  --red-700: #B81B22;
  --red-900: #6E0E11;

  /* Neutrals */
  --gray-0:    #FFFFFF;
  --gray-50:   #F7F7F8;
  --gray-100:  #EFEFF1;
  --gray-200:  #E3E3E6;
  --gray-300:  #CCCCD1;
  --gray-400:  #A8A8B0;
  --gray-500:  #82828B;
  --gray-600:  #5F5F68;
  --gray-700:  #42424A;
  --gray-800:  #2A2A31;
  --gray-900:  #15151A;
  --gray-950:  #0A0A0D;
  --gray-1000: #000000;

  --font-display: 'Gmarket Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Gmarket Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ACCENT — tweakable via Tweaks panel. Default red-600. */
  --accent: #D8232A;
  --accent-hover: #B81B22;
}

/* Theme — dark (default) */
.theme-dark {
  --bg:          #0A0A0D;
  --bg-subtle:   #15151A;
  --bg-raised:   #15151A;
  --fg:          #FFFFFF;
  --fg-muted:    rgba(255,255,255,0.64);
  --fg-subtle:   rgba(255,255,255,0.42);
  --border:      rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);
  --rail:        rgba(255,255,255,0.06);
}

/* Theme — light */
.theme-light {
  --bg:          #FFFFFF;
  --bg-subtle:   #F7F7F8;
  --bg-raised:   #FFFFFF;
  --fg:          #15151A;
  --fg-muted:    #5F5F68;
  --fg-subtle:   #82828B;
  --border:      #E3E3E6;
  --border-strong: #CCCCD1;
  --rail:        #F7F7F8;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* User requested relaxed tracking by default */
  letter-spacing: 0.005em;
}

body {
  transition: background 480ms var(--ease-out), color 480ms var(--ease-out);
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; }
button { font-family: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Type utility (user: no hyper-bold, no tight tracking) ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.rule { height: 1px; background: var(--border); width: 100%; }
.vrule { width: 1px; background: var(--border); align-self: stretch; }

/* ---------- Reusable ---------- */
.container { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: 1520px; margin: 0 auto; padding: 0 48px; }

@media (max-width: 900px) {
  .container, .container-wide { padding: 0 24px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline   { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--fg); }
.btn-ghost     { background: transparent; color: var(--fg-muted); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--fg); }

/* ---------- Section chrome ---------- */
.section {
  position: relative;
  padding: 192px 0;
  border-top: 1px solid var(--border);
}
.section-tight { padding: 144px 0; }
.section-hero { padding: 0; border-top: 0; }

.section-meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 64px;
  gap: 32px;
}
.section-meta .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.14em;
}

/* ---------- Marquee ticker ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ticker-track { display: inline-block; animation: marquee 60s linear infinite; }
.ticker-track span { padding: 0 32px; }
.ticker-track svg { vertical-align: middle; margin: 0 32px; }

/* ---------- Entry animations (fade + 8px translate-up, brand-compliant) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 480ms var(--ease-out) both; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- Grid helpers ---------- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* ---------- No-select ---------- */
.unselectable { user-select: none; }