/* ============================================================
   GIO Design Tokens — Linear/Notion-modern, signature green
   "정확성 · 즉시성 · 명료성 · 친밀감"
   ============================================================ */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable.ttf') format('truetype-variations');
}

:root {
  color-scheme: light;

  /* ---- Signature: GIO green (modern, less "edm", richer hue) ---- */
  --gio-h: 152;          /* hue — exposed for Tweaks slider */
  --gio-s: 70%;
  --gio-50:  oklch(0.97 0.04 var(--gio-h));
  --gio-100: oklch(0.94 0.07 var(--gio-h));
  --gio-200: oklch(0.88 0.12 var(--gio-h));
  --gio-300: oklch(0.80 0.16 var(--gio-h));
  --gio-400: oklch(0.72 0.19 var(--gio-h));
  --gio-500: oklch(0.65 0.20 var(--gio-h));   /* primary */
  --gio-600: oklch(0.56 0.18 var(--gio-h));
  --gio-700: oklch(0.46 0.14 var(--gio-h));
  --gio-800: oklch(0.36 0.10 var(--gio-h));
  --gio-900: oklch(0.26 0.06 var(--gio-h));

  /* ---- Neutrals (Linear-style ink) ---- */
  --ink-0:   #ffffff;
  --ink-25:  #fafbfb;
  --ink-50:  #f5f6f7;
  --ink-75:  #eef0f2;
  --ink-100: #e4e7ea;
  --ink-200: #d0d4d9;
  --ink-300: #a8aeb6;
  --ink-400: #7c828b;
  --ink-500: #565b63;
  --ink-600: #3c4047;
  --ink-700: #292c31;
  --ink-800: #1a1c1f;
  --ink-900: #0d0e10;

  /* ---- Skill accents (subtle, not loud) ---- */
  --skill-listening: #5b8cff;
  --skill-reading:   #ff8a3d;
  --skill-writing:   #b765ff;
  --skill-speaking:  #14b67a;

  /* ---- Semantic ---- */
  --ok:   #14b67a;
  --warn: #f5a524;
  --err:  #ef4d4d;
  --info: #3b82f6;

  /* ---- Surfaces ---- */
  --bg:        var(--ink-0);
  --bg-soft:   var(--ink-25);
  --bg-sunk:   var(--ink-50);
  --surface:   var(--ink-0);
  --border:    var(--ink-100);
  --border-strong: var(--ink-200);

  /* ---- Text ---- */
  --fg:        var(--ink-900);
  --fg-strong: var(--ink-900);
  --fg-body:   var(--ink-700);
  --fg-muted:  var(--ink-500);
  --fg-faint:  var(--ink-400);
  --fg-on-primary: #ffffff;

  /* ---- Type ---- */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 96px;

  /* ---- Radii (Linear: subtle softness) ---- */
  --r-1: 6px; --r-2: 8px; --r-3: 10px; --r-4: 12px; --r-5: 16px; --r-6: 20px; --r-7: 24px; --r-pill: 999px;

  /* ---- Shadows (layered, low-opacity) ---- */
  --shadow-1: 0 1px 2px rgba(13,14,16,.04), 0 1px 1px rgba(13,14,16,.03);
  --shadow-2: 0 4px 12px rgba(13,14,16,.06), 0 1px 2px rgba(13,14,16,.04);
  --shadow-3: 0 12px 32px rgba(13,14,16,.08), 0 4px 8px rgba(13,14,16,.04);
  --shadow-4: 0 24px 64px rgba(13,14,16,.12), 0 8px 16px rgba(13,14,16,.06);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--gio-500) 28%, transparent);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h: 64px;
}

/* Bridge legacy GIO components onto the new redesign token system. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --gio-50: var(--gio-color-action-soft);
  --gio-100: var(--gio-color-action-soft-hover);
  --gio-200: color-mix(in oklab, var(--gio-color-action) 20%, var(--gio-color-bg));
  --gio-300: color-mix(in oklab, var(--gio-color-action) 35%, var(--gio-color-bg));
  --gio-400: color-mix(in oklab, var(--gio-color-action) 70%, var(--gio-color-bg));
  --gio-500: var(--gio-color-action);
  --gio-600: var(--gio-color-action-hover);
  --gio-700: var(--gio-color-action-active);
  --gio-800: var(--gio-navy-700);
  --gio-900: var(--gio-navy-900);

  --ok: var(--gio-color-success);
  --warn: var(--gio-color-warning);
  --err: var(--gio-color-danger);
  --info: var(--gio-color-info);

  --skill-listening: var(--gio-color-skill-listening);
  --skill-reading: var(--gio-color-skill-reading);
  --skill-writing: var(--gio-color-skill-writing);
  --skill-speaking: var(--gio-color-skill-speaking);

  --bg: var(--gio-color-bg);
  --bg-soft: var(--gio-color-bg-subtle);
  --bg-sunk: var(--gio-color-surface-alt);
  --surface: var(--gio-color-surface);
  --border: var(--gio-color-border);
  --border-strong: var(--gio-color-border-strong);

  --fg: var(--gio-color-text);
  --fg-strong: var(--gio-color-text-strong);
  --fg-body: var(--gio-color-text);
  --fg-muted: var(--gio-color-text-muted);
  --fg-faint: var(--gio-color-text-faint);
  --fg-on-primary: var(--gio-color-text-on-action);

  --shadow-focus: var(--gio-focus-ring);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ============================================================
   Base — body.gio-site 가 붙은 페이지에서만 적용 (Bootstrap/레거시 페이지 충돌 방지)
   ============================================================ */
.gio-site, .gio-site *, .gio-site *::before, .gio-site *::after { box-sizing: border-box; }
.gio-site {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-body);
  background: var(--bg);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: 컨텐츠가 짧아도 푸터를 뷰포트 하단에 붙인다. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.gio-site > .app-footer { margin-top: auto; }
.gio-site :where(button, input, textarea, select) { font: inherit; letter-spacing: inherit; color: inherit; }
.gio-site :where(a) { color: inherit; text-decoration: none; }
.gio-site img, .gio-site svg { display: block; max-width: 100%; }
.gio-site :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-2); }
/* 레거시 app.css의 `main { padding-top: var(--gio-header-h) }` 규칙은 sticky 헤더가
   이미 자기 공간을 가지는 신규 레이아웃에서는 불필요한 offset을 만든다.
   .gio-site 페이지에서는 무력화. */
.gio-site main { padding-top: 0; min-height: 0; }

/* ============================================================
   Type utilities
   ============================================================ */
.gio-site .t-display  { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; color: var(--fg-strong); }
.gio-site .t-h1       { font-size: 40px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; color: var(--fg-strong); }
.gio-site .t-h2       { font-size: 28px; line-height: 1.25; letter-spacing: -0.022em; font-weight: 700; color: var(--fg-strong); }
.gio-site .t-h3       { font-size: 20px; line-height: 1.3;  letter-spacing: -0.018em; font-weight: 600; color: var(--fg-strong); }
.gio-site .t-body     { font-size: 16px; line-height: 1.55; }
.gio-site .t-small    { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.gio-site .t-tiny     { font-size: 12px; line-height: 1.45; color: var(--fg-muted); letter-spacing: 0; }
.gio-site .t-eyebrow  { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gio-700); }
.gio-site .t-mono     { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.gio-site .tnum       { font-variant-numeric: tabular-nums; }