/* ──────────────────────────────────────────────────────────────────────────
 * k.nexus design tokens — canonical, do NOT edit in service repos.
 * Source: /Users/kei/projects/k-nexus/design/tokens.css
 * Brand source-of-truth: /Users/kei/projects/nexusai-brand/NEXUS-AI-Brand-Guide.html
 * Sync via service-side scripts/sync-design.sh.
 *
 * Synthesis: NEXUS AI brand identity (neon/futurist gradient) on a calm
 * senior-friendly surface (white tiles, large legible type, flat layout).
 * The signature 4-color gradient appears at logo + hero moments only;
 * body UI uses the brand palette mapped semantically (Violet primary,
 * Cyan success, Magenta error, Amber accent).
 * ────────────────────────────────────────────────────────────────────────── */

/* Logo wordmark face — Orbitron, brand-mandated. Latin only; never used for
 * Korean body. CDN load; falls back to system display gracefully. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&display=swap');

:root {
  /* ── NEXUS AI brand palette (verbatim from brand guide) ──────────────── */
  --nx-cyan:    #00F0FF;   /* Neon Cyan       — Pantone 311 C */
  --nx-violet:  #7B61FF;   /* Electric Violet — Pantone 2725 C */
  --nx-magenta: #FF2D92;   /* Hot Magenta     — Pantone 213 C */
  --nx-amber:   #FFB800;   /* Amber Signal    — Pantone 1235 C */
  --nx-black:   #000000;
  --nx-rich-black: #08080A;
  --nx-white:   #FFFFFF;
  --nx-light-gray: #F4F4F6;

  /* Signature gradient — wordmark "ΛI", hero accents, og-image. Never on
   * body text or buttons (illegibility). */
  --nx-gradient: linear-gradient(135deg, #00F0FF, #7B61FF 40%, #FF2D92 70%, #FFB800);

  /* ── Semantic tokens — what services use ─────────────────────────────── */
  /* Ink (text) — brand rich black family */
  --ink:        #08080A;   /* Rich Black, primary text */
  --ink-soft:   #4A4A52;   /* secondary text */
  --muted:      #8A8A92;   /* tertiary, meta, hints */
  --line:       #ECECEF;   /* hairline separators */

  /* Surface */
  --bg:         #F4F4F6;   /* page background — brand Light Gray */
  --paper:      #FFFFFF;   /* card surface — brand White */
  --sunken:     #FAFAFB;   /* nested surface */

  /* Brand semantic — Electric Violet as primary action color */
  --brand:      #7B61FF;   /* Violet — primary CTA, links */
  --brand-dark: #5D44DD;   /* pressed / hover (darker violet) */
  --brand-soft: rgba(123, 97, 255, 0.10);  /* tinted bg for secondary btn */

  /* Accent — Amber Signal (one highlight moment per screen, max) */
  --accent:     #FFB800;
  --accent-soft: rgba(255, 184, 0, 0.12);

  /* State semantics — mapped to brand neons */
  --good:       #00D68F;   /* success / O / 다수파 — brand-adjacent green */
  --good-soft:  rgba(0, 214, 143, 0.10);
  --bad:        #FF2D92;   /* error / X / 탈락 — brand Magenta */
  --bad-soft:   rgba(255, 45, 146, 0.10);
  --info:       #00F0FF;   /* info / cyan — brand Neon Cyan */
  --info-soft:  rgba(0, 240, 255, 0.10);

  /* ── Geometry ────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  14px;     /* buttons, inputs */
  --radius-lg:  20px;     /* tiles */
  --radius-pill: 999px;

  /* Shadows — near-zero. Surfaces separate via bg contrast. */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-card: 0 1px 2px rgba(8, 8, 10, 0.04);
  --shadow-lift: 0 8px 24px rgba(8, 8, 10, 0.08);  /* sheets / modals only */

  /* ── Type scale — senior floor 18, max 48. All per brand-feel + a11y. ── */
  --fs-sm:      14px;     /* meta, dates (NEVER body) */
  --fs-base:    18px;     /* body — senior floor */
  --fs-lg:      20px;     /* lead body, callouts */
  --fs-xl:      26px;     /* card title */
  --fs-display: 36px;     /* page title */
  --fs-hero:    48px;     /* big number — balance, prize, score */

  /* Weights — capped at 700. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight: 1.25;
  --lh-base:  1.5;

  /* ── Wordmark sizes (Orbitron, Latin only) per brand guide ───────────── */
  --wm-sm:  16px;   /* letter-spacing 8px */
  --wm-md:  24px;   /* letter-spacing 12px */
  --wm-lg:  32px;   /* letter-spacing 16px */
  --wm-hero: 42px;  /* letter-spacing 20px — cover spec */

  /* ── Tap floor (accessibility, do not lower) ─────────────────────────── */
  --tap: 56px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   250ms;
}

/* ── Reset + baseline ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family:
    'Pretendard Variable', 'Pretendard',
    -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Noto Sans KR',
    'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
  letter-spacing: -0.01em;
}

/* Tabular numbers utility — money, scores, counters. */
.number,
.row .v,
.stat-big,
.meter-meta strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Links — Violet brand by default. */
a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { color: var(--brand-dark); text-decoration: underline; }

/* Focus — Violet ring with offset. Never invisible, never garish. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Honor user motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}