/* =========================================================================
   gennote-web — design system tokens & shared utilities
   ==========================================================================
   Single source of truth for colors, spacing, typography, and utility
   classes that aren't already covered by Tailwind. Mirrors the
   Gennote.io Design System package in Downloads/.

   Load order: AFTER the inline Tailwind CDN + per-page tailwind.config
   so CSS vars are defined but Tailwind's utility classes still win.
   ========================================================================= */


/* ── CSS variables (design tokens) ───────────────────────────────────── */
:root {
  /* Surfaces — dark ladder */
  --gn-surface:                  #0e131e;
  --gn-surface-dim:              #090e19;
  --gn-surface-container-low:    #171b27;
  --gn-surface-container:        #1b1f2b;
  --gn-surface-container-high:   #252a36;
  --gn-surface-container-highest:#303541;
  --gn-surface-bright:           #343946;
  --gn-surface-terminal:         #05080f;

  /* Foreground */
  --gn-fg:                       #dee2f2;
  --gn-fg-variant:               #bacac2;
  --gn-fg-muted:                 #85948d;
  --gn-fg-disabled:              #3b4a44;

  /* Accents */
  --gn-primary:                  #46f1c5;
  --gn-primary-dim:              #28dfb5;
  --gn-on-primary:               #00382b;
  --gn-secondary:                #f5a623;
  --gn-on-secondary:             #1b1f2b;
  --gn-error:                    #ffb4ab;

  /* Alpha ladder (derived from primary mint) */
  --gn-primary-a03: rgba(70,241,197,0.03);
  --gn-primary-a05: rgba(70,241,197,0.05);
  --gn-primary-a08: rgba(70,241,197,0.08);
  --gn-primary-a10: rgba(70,241,197,0.10);
  --gn-primary-a15: rgba(70,241,197,0.15);  /* ghost-border default */
  --gn-primary-a25: rgba(70,241,197,0.25);
  --gn-primary-a35: rgba(70,241,197,0.35);
  --gn-primary-a40: rgba(70,241,197,0.40);  /* ghost-border hover */
  --gn-white-a02:   rgba(255,255,255,0.02);
  --gn-white-a05:   rgba(255,255,255,0.05);
  --gn-white-a10:   rgba(255,255,255,0.10);
  --gn-dot-grid:    rgba(133,148,141,0.12);

  /* Domain chips (papers) */
  --gn-chip-ophtho:  #46f1c5;
  --gn-chip-ent:     #46c8f1;
  --gn-chip-hnscc:   #f5a623;
  --gn-chip-rhino:   #b0a4ff;
  --gn-chip-onco:    #ff9e9e;
  --gn-chip-allergy: #ffcc80;
  --gn-chip-other:   #85948d;

  /* Research-card status */
  --gn-status-exploring:  var(--gn-secondary);
  --gn-status-validating: #b0a4ff;
  --gn-status-figure:     var(--gn-primary);
  --gn-status-paper:      var(--gn-primary);
  --gn-status-archived:   var(--gn-fg-muted);

  /* Typography */
  --gn-font-headline: 'Noto Serif', Georgia, serif;
  --gn-font-body:     'Inter', system-ui, sans-serif;
  --gn-font-label:    'Space Grotesk', sans-serif;
  --gn-font-mono:     'Fira Code', ui-monospace, monospace;
}


/* ── FOUC guard while i18n.js swaps data-en text ──────────────────
   Suppresses the Korean → English flash on pages with data-ko/en
   attributes. Only hides the elements that actually carry
   translatable text (and their placeholders) — the rest of the
   layout (nav chrome, icons, backgrounds) remains visible, so EN
   users see the same skeleton at first paint as KR users.
   Cleared when gnApplyLang() removes html[data-lang-pending]. */
html[data-lang-pending="en"] [data-ko],
html[data-lang-pending="en"] [data-ko-placeholder],
html[data-lang-pending="en"] [data-ko-title] {
    visibility: hidden;
}


/* ── The signature: 32px radial-dot background ─────────────────────── */
body {
  background-image: radial-gradient(var(--gn-dot-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}


/* ── Utility classes (shared across pages) ────────────────────────── */

/* Hairlines — the 1px mint borders used on cards, buttons, inputs */
.ghost-border { border: 1px solid var(--gn-primary-a15); }
.ghost-border-hover:hover { border-color: var(--gn-primary-a40); }

/* Card lift — the subtle mint-halo hover used on interactive cards */
.card-lift {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-lift:hover {
  transform: translateY(-2px);
  border-color: var(--gn-primary-a35);
  box-shadow: 0 0 30px var(--gn-primary-a05);
}

/* Terminal glow — used on italicized Chopa responses */
.terminal-glow {
  text-shadow: 0 0 5px rgba(70, 241, 197, 0.3);
}

/* Tabular numerals — pair with font-mono for stats/scores/metrics */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* fadeSlideUp — section entry animation */
@keyframes gnFadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: gnFadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Dashed-line stroke animation for pipeline diagrams */
@keyframes gnDash {
  to { stroke-dashoffset: -40; }
}
.dash-loop {
  stroke-dasharray: 4 4;
  animation: gnDash 20s linear infinite;
}

/* Cursor blink — Chopa terminal */
@keyframes gnCursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.cursor-blink {
  animation: gnCursorBlink 1.1s steps(1, end) infinite;
  box-shadow: 0 0 10px rgba(70, 241, 197, 0.5);
}

/* Signal dots — for admin/stats status rows (🟢🔴🟡⚪) */
.gn-signal {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  vertical-align: middle;
}
.gn-signal.ok       { background: var(--gn-primary); box-shadow: 0 0 6px var(--gn-primary-a40); }
.gn-signal.fail     { background: var(--gn-error); box-shadow: 0 0 6px rgba(255,180,171,0.4); }
.gn-signal.run      { background: var(--gn-secondary); box-shadow: 0 0 6px rgba(245,166,35,0.4); }
.gn-signal.nodata   { background: var(--gn-fg-muted); opacity: 0.6; }


/* ── Focus styles (keyboard nav) ──────────────────────────────────── */
:focus-visible {
  outline: 1px solid var(--gn-primary);
  outline-offset: 2px;
}
/* Remove Tailwind's ring from form controls on focus (matches existing
   pattern: accent via border + bg, not ring) */
input:focus, select:focus, textarea:focus, button:focus {
  --tw-ring-shadow: 0 0 #0000 !important;
}


/* ── Text selection highlight ─────────────────────────────────────── */
::selection {
  background: var(--gn-primary-a25);
  color: #ffffff;
}


/* ── Reduced-motion preferences ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .card-lift,
  .dash-loop,
  .cursor-blink {
    animation: none !important;
    transition: none !important;
  }
  .card-lift:hover {
    transform: none;
  }
}


/* ── Tabular numbers by default for elements tagged .num ──────────── */
.num {
  font-family: var(--gn-font-mono);
  font-variant-numeric: tabular-nums;
}


/* ── Print: hide nav + use ink palette ────────────────────────────── */
@media print {
  body { background: #ffffff; color: #000000; }
  nav, footer, header button { display: none !important; }
}