/* ============================================================
   VoiceLog Design System — Foundations
   ============================================================
   Brand: VoiceLog / 보이스로그 (voicelog.kr)
   Aesthetic: Official document utility — Korean public-sector
   formality crossed with quiet modern SaaS.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Pretendard: Korean + Latin sans, the de-facto Korean SaaS UI face */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
/* Noto Serif KR: authoritative Korean serif for display + document headings */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700;900&display=swap');
/* JetBrains Mono: timestamps, transcript IDs, prices */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — Ink on Paper
     ============================================================
     Warm-paper background, near-black ink, single seal-red accent.
     No gradients. No bluish-purple. Reds are sparing, never decorative.
     ============================================================ */

  /* Paper (backgrounds) */
  --paper-0:        #FBFAF7;   /* page background — warm off-white */
  --paper-1:        #F5F3EE;   /* sunken: code blocks, transcript wells */
  --paper-2:        #ECE9E2;   /* deeper sunken: hover on paper-1 */
  --paper-card:     #FFFFFF;   /* card / sheet — pure white to read as paper */

  /* Ink (foreground) */
  --ink-0:          #14110D;   /* primary text — warm near-black */
  --ink-1:          #3A352D;   /* secondary text */
  --ink-2:          #6B6459;   /* tertiary / muted */
  --ink-3:          #A39C8E;   /* placeholder / disabled */
  --ink-4:          #CFC9BC;   /* hairline-on-ink */

  /* Hairlines (borders) */
  --line-1:         #E2DDD2;   /* default border */
  --line-2:         #CFC9BC;   /* emphasized border */
  --line-3:         #14110D;   /* document rule (hard line) */

  /* Seal Red — single accent, derived from Korean 직인 (official seal) */
  --seal-50:        #FBEEEA;
  --seal-100:       #F4D3CB;
  --seal-300:       #D9786A;
  --seal-500:       #B8392A;   /* primary accent */
  --seal-600:       #9B2C1F;   /* hover */
  --seal-700:       #7A2218;   /* pressed */
  --seal-900:       #4A140E;

  /* Semantic */
  --success-500:    #2F6B3A;   /* dark herbal green, document-grade */
  --success-50:     #EAF1EB;
  --warning-500:    #A66B0E;   /* aged ochre */
  --warning-50:     #F5ECDA;
  --danger-500:     var(--seal-500);
  --danger-50:      var(--seal-50);
  --info-500:       #2D4A6B;   /* slate-blue, used sparingly */
  --info-50:        #E5ECF3;

  /* Watermark — required for AI drafts per §6 운영 규칙 */
  --watermark:      rgba(184, 57, 42, 0.08);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:      'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-serif:     'Noto Serif KR', 'Source Han Serif KR', 'Nanum Myeongjo', Georgia, serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular 1.2 for UI, 1.25 for display */
  --text-2xs:       11px;
  --text-xs:        12px;
  --text-sm:        13px;
  --text-base:      15px;   /* body default */
  --text-md:        17px;
  --text-lg:        20px;
  --text-xl:        24px;
  --text-2xl:       30px;
  --text-3xl:       38px;
  --text-4xl:       48px;
  --text-5xl:       64px;

  /* Line heights — tighter than typical SaaS, document-feel */
  --lh-tight:       1.15;
  --lh-snug:        1.35;
  --lh-normal:      1.55;
  --lh-loose:       1.75;

  /* Tracking */
  --track-tight:    -0.02em;
  --track-snug:     -0.01em;
  --track-normal:   0;
  --track-wide:     0.06em;     /* eyebrow / labels */
  --track-wider:    0.14em;     /* SECTION CAPS */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:        0;
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;
  --space-24:       96px;

  /* ============================================================
     RADII — squared documents, gently rounded controls
     ============================================================ */
  --radius-0:       0;          /* documents, sheets, transcript wells */
  --radius-sm:      4px;        /* tags, chips */
  --radius:         6px;        /* buttons, inputs (default) */
  --radius-md:      8px;        /* cards */
  --radius-lg:      12px;       /* modals */
  --radius-pill:    999px;      /* status pills only */

  /* ============================================================
     ELEVATION — borders first, shadows second
     ============================================================
     Cards use borders; shadows reserved for floating UI.
     ============================================================ */
  --shadow-0:       none;
  --shadow-1:       0 1px 2px rgba(20, 17, 13, 0.04);                 /* subtle lift on white */
  --shadow-2:       0 4px 12px rgba(20, 17, 13, 0.06),
                    0 1px 2px rgba(20, 17, 13, 0.04);                 /* menus */
  --shadow-3:       0 12px 32px rgba(20, 17, 13, 0.10),
                    0 2px 4px rgba(20, 17, 13, 0.06);                 /* modals, toasts */
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Focus ring — seal red, 2px offset */
  --focus-ring:     0 0 0 2px var(--paper-0), 0 0 0 4px var(--seal-500);

  /* ============================================================
     MOTION — restrained, document-like
     ============================================================ */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       280ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--paper-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink-0);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink-0);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--ink-0);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--ink-0);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--ink-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-2);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-1);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

code {
  font-size: 0.92em;
  background: var(--paper-1);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-1);
}

pre {
  background: var(--paper-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-0);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  overflow-x: auto;
}

a {
  color: var(--seal-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--seal-700); }

::selection {
  background: var(--seal-100);
  color: var(--seal-900);
}

/* Tabular numerals utility for prices/timestamps */
.tnum { font-variant-numeric: tabular-nums; }