/* css/theme.css — Modern Linguistic Precision Design System */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Pretendard:wght@400;500;600;700&display=swap");

:root {
  /* Canvas & Surface Architecture */
  --bg-app: #f8fafc;
  --surface-pure: #ffffff;
  --surface-low: #f1f5f9;
  --surface-container: #e2e8f0;
  --border-line: #e2e8f0;
  --border-active: #cbd5e1;

  /* Ink & Typography */
  --ink-headline: #0f172a;
  --ink-body: #334155;
  --ink-muted: #64748b;
  --ink-subzero: #94a3b8;

  /* Semantic Linguistic Taxonomy */
  --c-primary: #4f46e5;
  --c-primary-hover: #4338ca;
  --c-primary-soft: #eef2ff;
  --c-primary-border: #e0e7ff;

  --c-syntax: #0d9488;
  --c-syntax-soft: #f0fdfa;
  --c-syntax-border: #ccfbf1;

  --c-idiom: #e11d48;
  --c-idiom-soft: #fff1f2;
  --c-idiom-border: #ffe4e6;

  --c-noun: #0284c7;
  --c-noun-soft: #f0f9ff;
  --c-noun-border: #e0f2fe;

  --c-gold: #f59e0b;
  --c-gold-soft: #fef3c7;
  --c-gold-border: #fde68a;

  --c-error: #ba1a1a;
  --c-error-soft: #ffdad6;

  /* Elevation & Shadows */
  --shadow-sm:
    0 1px 2px 0 rgba(15, 23, 42, 0.03), 0 1px 3px -1px rgba(15, 23, 42, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg:
    0 10px 15px -3px rgba(15, 23, 42, 0.04),
    0 4px 6px -4px rgba(15, 23, 42, 0.02);
  --shadow-float:
    0 20px 25px -5px rgba(15, 23, 42, 0.08),
    0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* Fonts */
  --font-sans: "Pretendard", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

body {
  background-color: var(--bg-app) !important;
  color: var(--ink-headline) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* Base Overrides for Modern Linguistic Precision */
.code,
.pron,
.entry-meta,
.badge-count,
.unit-src,
.unit-debug {
  font-family: var(--font-mono) !important;
}

/* Material Symbols alignment */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  vertical-align: middle;
}