/* =========================================================
NAIRL Design System — Colors + Type (raw custom properties)
Mirrors theme.json. theme.json is the editor-facing source of
truth; this file exposes the same values as --navy-*, --font-*,
--space-* etc. for the hand-authored component CSS (main.css, nav.css).
Pretendard is registered via theme.json (self-hosted woff2, preloaded in
). Source Serif 4 / Noto Serif KR / JetBrains Mono are loaded from
Google Fonts via a + preconnect (see nairl_font_head() in
functions.php) — faster than an @import here, which reduces the font swap.
========================================================= */
:root {
/* Global type scale. --fs-base is the one knob (1 = design baseline,
1.2 = +20%). Every font-size is calc( * var(--fs-scale)); --fs-scale
defaults to the base but is reduced for the header/footer chrome (see below). */
--fs-base: 1.2;
--fs-scale: var(--fs-base);
/* COLORS — Brand */
--navy-900: #021737;
--navy-800: #022150;
--navy-700: #0a2e6c;
--navy-600: #1244a0;
--navy-500: #1f5dcc;
--navy-400: #5b8def;
--navy-300: #a6c1f4;
--navy-200: #d3def8;
--navy-100: #eaf0fb;
--navy-050: #f4f7fc;
--accent-700: #0a5984;
--accent-600: #1175a8;
--accent-500: #1689cc;
--accent-400: #3ba8e4;
--accent-300: #7fcaf0;
--accent-200: #b8e2f8;
--accent-100: #e2f2fc;
--white: #ffffff;
--gray-050: #f7f8fa;
--gray-100: #eef0f3;
--gray-200: #dfe2e8;
--gray-300: #c4c9d2;
--gray-400: #9aa1ad;
--gray-500: #6c7480;
--gray-600: #4b525e;
--gray-700: #333944;
--gray-800: #1f242d;
--gray-900: #10141a;
--success: #1e8a5a;
--warning: #c98a13;
--danger: #c63838;
--info: var(--navy-500);
/* SEMANTIC ROLES */
--bg: var(--white);
--bg-subtle: var(--gray-050);
--bg-muted: var(--gray-100);
--bg-inverse: var(--navy-800);
--fg: var(--navy-900);
--fg-muted: var(--gray-600);
--fg-subtle: var(--gray-500);
--fg-inverse: var(--white);
--fg-accent: var(--accent-500);
--fg-link: var(--navy-600);
--border: var(--gray-200);
--border-strong:var(--gray-300);
--border-inverse:var(--navy-700);
--rule: var(--navy-800);
/* TYPE — Families */
--font-serif: 'Source Serif 4', 'Source Serif Pro', 'Noto Serif KR', Georgia, 'Pretendard', 'Times New Roman', serif;
--font-sans: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
--font-display: var(--font-serif);
--font-body: var(--font-sans);
/* TYPE — Sizes (1.250 major-third) */
--fs-12: 0.75rem;
--fs-13: 0.8125rem;
--fs-14: 0.875rem;
--fs-15: 0.9375rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-28: 1.75rem;
--fs-32: 2rem;
--fs-40: 2.5rem;
--fs-48: 3rem;
--fs-56: 3.5rem;
--fs-64: 4rem;
--fs-80: 5rem;
--lh-tight: 1.08;
--lh-snug: 1.2;
--lh-normal: 1.45;
--lh-loose: 1.65;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-eyebrow:0.14em;
/* SPACING (4px base) */
--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;
--space-32: 128px;
/* RADII */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-pill: 999px;
/* SHADOWS — soft, low-contrast navy */
--shadow-xs: 0 1px 2px rgba(2, 23, 55, 0.05);
--shadow-sm: 0 1px 3px rgba(2, 23, 55, 0.06), 0 1px 2px rgba(2, 23, 55, 0.04);
--shadow-md: 0 4px 12px rgba(2, 23, 55, 0.08), 0 1px 3px rgba(2, 23, 55, 0.04);
--shadow-lg: 0 12px 32px rgba(2, 23, 55, 0.10), 0 2px 6px rgba(2, 23, 55, 0.05);
--shadow-xl: 0 24px 64px rgba(2, 23, 55, 0.14);
--shadow-inset: inset 0 0 0 1px rgba(2, 23, 55, 0.06);
/* MOTION */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasis: cubic-bezier(0.3, 0, 0, 1.15);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* LAYOUT */
--container: 1240px;
--container-narrow: 880px;
--gutter: clamp(20px, 4vw, 48px);
}
/* The top menu (header), its search overlay, and the footer run 10% smaller
than the body scale. Tracks --fs-base automatically. */
.topbar,
.search-overlay,
.footer { --fs-scale: calc(var(--fs-base) * 0.9); }
/* SEMANTIC TYPE STYLES */
.t-eyebrow {
font-family: var(--font-sans);
font-weight: 600;
font-size:calc((var(--fs-12)) * var(--fs-scale));
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--accent-500);
}
.t-display-1 { font-family: var(--font-display); font-weight: 400; font-size:calc((clamp(2.5rem, 5.2vw, var(--fs-80))) * var(--fs-scale)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.t-display-2 { font-family: var(--font-display); font-weight: 400; font-size:calc((clamp(2rem, 4vw, var(--fs-64))) * var(--fs-scale)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.t-h1 { font-family: var(--font-display); font-weight: 500; font-size:calc((var(--fs-48)) * var(--fs-scale)); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg); }
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size:calc((var(--fs-32)) * var(--fs-scale)); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg); }
.t-h3 { font-family: var(--font-sans); font-weight: 700; font-size:calc((var(--fs-24)) * var(--fs-scale)); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg); }
.t-h4 { font-family: var(--font-sans); font-weight: 700; font-size:calc((var(--fs-18)) * var(--fs-scale)); line-height: var(--lh-snug); color: var(--fg); }
.t-lead { font-family: var(--font-body); font-weight: 400; font-size:calc((var(--fs-20)) * var(--fs-scale)); line-height: var(--lh-normal); color: var(--fg-muted); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size:calc((var(--fs-16)) * var(--fs-scale)); line-height: var(--lh-normal); color: var(--fg); }
.t-small { font-family: var(--font-body); font-weight: 400; font-size:calc((var(--fs-14)) * var(--fs-scale)); line-height: var(--lh-normal); color: var(--fg-muted); }
.t-caption { font-family: var(--font-sans); font-weight: 500; font-size:calc((var(--fs-12)) * var(--fs-scale)); line-height: var(--lh-normal); letter-spacing: var(--tracking-wide); color: var(--fg-subtle); text-transform: uppercase; }
.t-mono { font-family: var(--font-mono); font-weight: 400; font-size:calc((var(--fs-14)) * var(--fs-scale)); line-height: var(--lh-normal); color: var(--fg); }