/* ==========================================================================
MiriAI Design Tokens — web
Source of truth: REBRAND_PLAN.md §3 / designsystem/MiriAI Design System.html
Load this before any project stylesheet, then reference the variables only.
==========================================================================
FONTS — add to the of every page (CDN), or self-host equivalents:
Unbounded / Space Grotesk / Sora are Latin-only; Pretendard is the Korean
fallback in every stack below. Korean text therefore renders in Pretendard
even inside a Display element.
========================================================================== */
:root {
/* --- brand ------------------------------------------------------------ */
--color-primary: #1E1B4B; /* Deep Indigo — headers, body text, dark surfaces */
--color-brand: #3B2E8C; /* Indigo — primary buttons, links, selected state */
--color-secondary: #009BA6; /* Teal — secondary actions, data lines */
--color-accent: #3FE0C5; /* Mint — prediction signals, CTA on dark.
Never for body text or large fills. */
--color-surface: #FFFFFF;
--color-bg: #FAFAFE;
--color-border: #E4E2EC;
/* --- neutrals --------------------------------------------------------- */
--neutral-50: #FAFAFE;
--neutral-100: #EFEEF6;
--neutral-200: #D9D7E4;
--neutral-400: #8C88A3;
--neutral-600: #565273;
--neutral-900: #211E3D;
/* --- semantic ---------------------------------------------------------
4단계 위험도 램프: normal -> watch -> high -> risk. info는 램프 밖.
배경색은 전경색과 같은 색상(H)에 명도 94% 안팎으로 맞춘 파스텔이다. */
--color-normal: #1E9E68; --color-normal-bg: #E7F8EF;
--color-watch: #D99815; --color-watch-bg: #FEF5E0;
--color-high: #D96A1E; --color-high-bg: #FEF0E4;
--color-risk: #D8483A; --color-risk-bg: #FDECE9;
--color-info: #3466CC; --color-info-bg: #EAF0FB;
/* --- typography ------------------------------------------------------- */
--font-display: 'Unbounded', 'Pretendard', sans-serif; /* brand moments only */
--font-ui: 'Space Grotesk', 'Pretendard', sans-serif;
--font-body: 'Sora', 'Pretendard', sans-serif;
--font-mono: 'JetBrains Mono', 'Space Grotesk', monospace;
--font-numeric: var(--font-ui); /* figures MUST use this or --font-mono */
/* type scale — size / weight / line-height */
--text-display: 40px; --text-display-weight: 600;
--text-h1: 28px; --text-h1-weight: 600;
--text-h2: 20px; --text-h2-weight: 600;
--text-h3: 15px; --text-h3-weight: 600;
--text-body: 14px; --text-body-weight: 300; --text-body-lh: 1.7;
--text-small: 12.5px; --text-small-weight: 400;
--text-mono: 11px; --text-mono-weight: 500;
/* --- spacing (8px grid) ----------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
/* --- radius ----------------------------------------------------------- */
--radius-chip: 6px;
--radius-button: 10px;
--radius-card: 14px;
--radius-sheet: 22px;
--radius-badge: 9999px;
/* --- controls --------------------------------------------------------- */
--control-height: 40px; /* web */
--touch-target: 44px; /* minimum tappable size */
/* --- elevation — modals, dropdowns and FABs only. Cards use a border. -- */
--shadow-modal: 0 18px 44px rgba(30, 27, 75, .20);
--shadow-dropdown: 0 8px 20px rgba(30, 27, 75, .12);
}
/* Mobile web bumps body/caption up and headings down for readability. */
@media (max-width: 640px) {
:root {
--text-display: 26px;
--text-h1: 24px;
--text-body: 15px;
--text-small: 13px;
--control-height: 48px;
}
}
/* --- base ---------------------------------------------------------------- */
body {
background: var(--color-bg);
color: var(--neutral-900);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--text-body-weight);
line-height: var(--text-body-lh);
}
/* --- helpers ------------------------------------------------------------- */
.miriai-display { font-family: var(--font-display); font-weight: var(--text-display-weight); font-size: var(--text-display); }
.miriai-h1 { font-family: var(--font-ui); font-weight: var(--text-h1-weight); font-size: var(--text-h1); }
.miriai-h2 { font-family: var(--font-ui); font-weight: var(--text-h2-weight); font-size: var(--text-h2); }
.miriai-h3 { font-family: var(--font-ui); font-weight: var(--text-h3-weight); font-size: var(--text-h3); }
.miriai-small { font-size: var(--text-small); font-weight: var(--text-small-weight); }
.miriai-num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.miriai-mono { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: var(--text-mono-weight); }
.miriai-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: var(--space-4);
}
.miriai-btn {
height: var(--control-height);
padding: 0 var(--space-3);
border: 0;
border-radius: var(--radius-button);
background: var(--color-brand);
color: var(--color-surface);
font-family: var(--font-ui);
font-weight: 600;
cursor: pointer;
}
/* Mint CTA — dark surfaces only, and at most one per screen. */
.miriai-btn--accent { background: var(--color-accent); color: var(--color-primary); }
/* Wordmark lockup, when rendering the logo as live text rather than the SVG. */
.miriai-wordmark {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: .04em;
color: var(--neutral-50);
}
.miriai-wordmark .ai { color: var(--color-accent); }