/* ============================================================================ 꿀툰 GGULTOON DESIGN SYSTEM — Foundations Korean webtoon platform: vertical-scroll viewer + reader community. Content-first, dark-mode-first, neutral grayscale + a single honey-gold action accent. Readability above all. ---------------------------------------------------------------------------- USAGE - Default (no attribute) = DARK theme. This is the canonical assumption. - Add data-theme="light" to for the light theme. - All product UI should reference semantic vars (--bg-app, --fg-1, --accent…) never the raw scale tokens, so theme-switching stays automatic. ========================================================================== */ /* ---- Webfont: Pretendard (primary), Noto Sans KR (fallback) -------------- * Pretendard is loaded from the jsDelivr dynamic-subset CDN. It is the brand's primary face — NOT a substitution. Noto Sans KR (Google Fonts) is the system fallback for environments that cannot reach the Pretendard CDN. If you need fully offline/self-hosted fonts, drop the .woff2 files into fonts/ and swap these @import lines for @font-face rules. */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&display=swap"); :root { /* ====================================================================== 1. RAW SCALE TOKENS (don't reference directly in product UI) ====================================================================== */ /* Neutral grayscale — the entire chassis. Cool-neutral, very slightly blue-leaning so it reads calm next to warm artwork. */ --gray-0: #FFFFFF; --gray-50: #F6F6F8; --gray-100:#ECECEF; --gray-150:#E2E2E7; --gray-200:#D3D3DA; --gray-300:#B6B6C0; --gray-400:#8C8C99; --gray-500:#6E6E7A; --gray-600:#54545F; --gray-700:#3C3C45; --gray-800:#26262C; --gray-850:#1D1D22; --gray-900:#161619; --gray-950:#0F0F12; --gray-1000:#08080A; /* Accent — indigo→violet. The ONE chromatic family in the product. Reserved for actions: links, like, primary buttons, notifications, focus, active nav. Never decorative. */ --violet-300:#B5A9FB; --violet-400:#9B8BF8; --violet-500:#8170F4; /* dark-theme accent */ --violet-600:#6A55EC; /* light-theme accent */ --violet-700:#5A45D6; --violet-800:#4838AE; /* Honey / amber-gold — the BRAND accent ("꿀툰" = honey). Glows on near-black in dark mode; deepens for legibility on white in light mode. Because gold is a LIGHT hue, text ON an accent fill is dark (--fg-on-accent), not white. */ --honey-300:#FBD68C; --honey-400:#F6C158; --honey-500:#F09E1F; /* dark-theme accent fill + glow (richer caramel-honey) */ --honey-600:#D4830F; --honey-700:#AC6909; --honey-800:#875107; /* light-theme accent text/links (passes contrast on white) */ /* Semantic chromatics — deliberately OUTSIDE the accent family so error/warning never read as "an action". */ --red-400:#F36B72; --red-500:#E5484D; --red-600:#CE3539; --amber-400:#F2B441; --amber-500:#E0992E; --green-400:#46C08A; --green-500:#2FA573; /* ====================================================================== 2. SPACING — 4px base unit ====================================================================== */ --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; /* Viewer rhythm — consistent left/right margin & inter-image gutter for the vertical-scroll reader. Mobile defaults; widened at breakpoints below. */ --viewer-max: 720px; /* readable column cap on desktop */ --viewer-pad: 0px; /* mobile = full-bleed images */ --viewer-gap: 0px; /* seamless long-strip by default */ /* ====================================================================== 3. RADII ====================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ====================================================================== 4. TYPE — Pretendard, Korean-first metrics ====================================================================== */ --font-sans: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --font-mono: "Noto Sans Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; /* Korean reads best with slightly tight tracking + generous leading. */ --tracking-tight: -0.02em; --tracking-base: -0.01em; --tracking-loose: 0em; --leading-tight: 1.35; --leading-snug: 1.45; --leading-body: 1.7; /* long-form reading default */ --leading-relaxed:1.8; /* Type ramp (mobile-first sizes; px). */ --fs-display: 28px; --fs-h1: 24px; --fs-h2: 20px; --fs-h3: 17px; --fs-body-lg: 16px; --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 12px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ====================================================================== 5. MOTION ====================================================================== */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* Minimum interactive target (mobile). */ --tap-min: 44px; } /* ========================================================================== 6. SEMANTIC THEME — DARK (default / canonical) ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg-viewer: var(--gray-1000); /* pure-ish black behind artwork */ --bg-app: var(--gray-950); /* base chrome background */ --bg-1: var(--gray-900); /* primary surface */ --bg-2: var(--gray-850); /* raised surface / cards */ --bg-3: var(--gray-800); /* popover / pressed / hover-fill */ --bg-inset: var(--gray-1000); /* wells, inputs */ --fg-1: #F3F3F6; /* primary text */ --fg-2: var(--gray-400); /* secondary text */ --fg-3: var(--gray-500); /* tertiary / meta */ --fg-disabled: var(--gray-600); --fg-on-accent: #2E2102; /* DARK text on the light honey fill */ --border-1: rgba(255,255,255,0.07); /* hairline dividers */ --border-2: rgba(255,255,255,0.12); /* card / input borders */ --border-strong: rgba(255,255,255,0.20); --accent: var(--honey-500); --accent-hover: var(--honey-400); --accent-press: var(--honey-600); --accent-fill-weak: rgba(240,158,31,0.18); /* tinted backgrounds */ --accent-fg: var(--honey-400); /* accent text on dark */ --error: var(--red-400); --error-fill-weak: rgba(229,72,77,0.16); --warning: #F05A47; /* coral-red — firmly in the alert family */ --warning-fill-weak: rgba(240,90,71,0.16); --success: var(--green-400); --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); --overlay-scrim: rgba(0,0,0,0.6); /* Theme-aware chrome — translucent app bars (top/bottom nav) and viewer bars. Defined per-theme so bars adapt instead of being hardcoded dark. */ --chrome-bg: rgba(15,15,18,0.80); --viewer-bar-bg: rgba(8,8,10,0.72); /* Accent text that must stay legible on an always-dark art scrim (hero, cover-overlay) regardless of theme. */ --on-art-accent: var(--honey-400); --shadow-1: 0 1px 2px rgba(0,0,0,0.5); --shadow-2: 0 4px 16px rgba(0,0,0,0.45); --shadow-3: 0 12px 40px rgba(0,0,0,0.55); } /* ========================================================================== 7. SEMANTIC THEME — LIGHT ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg-viewer: var(--gray-100); --bg-app: var(--gray-50); --bg-1: var(--gray-0); --bg-2: var(--gray-0); --bg-3: var(--gray-100); --bg-inset: var(--gray-50); --fg-1: #17171C; --fg-2: var(--gray-500); --fg-3: var(--gray-400); --fg-disabled: var(--gray-300); --fg-on-accent: #2E2102; /* DARK text on the light honey fill */ --border-1: rgba(16,16,24,0.07); --border-2: rgba(16,16,24,0.12); --border-strong: rgba(16,16,24,0.20); --accent: var(--honey-500); --accent-hover: var(--honey-400); --accent-press: var(--honey-600); --accent-fill-weak: rgba(212,131,15,0.16); --accent-fg: var(--honey-800); /* deep gold — legible on white */ --error: var(--red-500); --error-fill-weak: rgba(229,72,77,0.10); --warning: #D8412C; /* coral-red — firmly in the alert family */ --warning-fill-weak: rgba(216,65,44,0.12); --success: var(--green-500); --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); --overlay-scrim: rgba(16,16,24,0.45); --chrome-bg: rgba(248,248,250,0.82); --viewer-bar-bg: rgba(244,244,247,0.86); --on-art-accent: var(--honey-400); --shadow-1: 0 1px 2px rgba(16,16,24,0.06); --shadow-2: 0 4px 16px rgba(16,16,24,0.10); --shadow-3: 0 12px 40px rgba(16,16,24,0.14); } /* ========================================================================== 7b. ACCENT OVERRIDE — violet (compare mode) Set data-accent="violet" on to swap the brand accent back to the original indigo→violet, for side-by-side comparison. Default (no attr) = honey. ========================================================================== */ :root[data-accent="violet"] { --accent: var(--violet-500); --accent-hover: var(--violet-400); --accent-press: var(--violet-600); --accent-fill-weak: rgba(129,112,244,0.16); --accent-fg: var(--violet-300); --fg-on-accent: #FFFFFF; --on-art-accent: var(--violet-300); } :root[data-theme="light"][data-accent="violet"] { --accent: var(--violet-600); --accent-hover: var(--violet-500); --accent-press: var(--violet-700); --accent-fill-weak: rgba(106,85,236,0.10); --accent-fg: var(--violet-600); --fg-on-accent: #FFFFFF; --on-art-accent: var(--violet-300); } /* ========================================================================== 8. SEMANTIC TYPOGRAPHY ROLES Apply these classes (or copy the declarations) instead of re-deriving sizes. ========================================================================== */ .t-display { font: var(--weight-bold) var(--fs-display)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); } .t-h1 { font: var(--weight-bold) var(--fs-h1)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); } .t-h2 { font: var(--weight-bold) var(--fs-h2)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-base); } .t-h3 { font: var(--weight-semibold) var(--fs-h3)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-base); } .t-body-lg { font: var(--weight-regular) var(--fs-body-lg)/var(--leading-body) var(--font-sans); letter-spacing: var(--tracking-base); } .t-body { font: var(--weight-regular) var(--fs-body)/var(--leading-body) var(--font-sans); letter-spacing: var(--tracking-base); } .t-body-sm { font: var(--weight-regular) var(--fs-body-sm)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-base); } .t-caption { font: var(--weight-regular) var(--fs-caption)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--fg-3); } .t-label { font: var(--weight-semibold) var(--fs-body-sm)/1.3 var(--font-sans); letter-spacing: var(--tracking-base); } .t-mono { font: var(--weight-regular) var(--fs-body-sm)/var(--leading-snug) var(--font-mono); } /* ========================================================================== 9. RESPONSIVE — mobile-first scale-ups Breakpoints: mobile ≤768, tablet ≤1024, desktop 1024+ ========================================================================== */ @media (min-width: 768px) { :root { --viewer-pad: 0px; --viewer-gap: 0px; --fs-display: 32px; --fs-h1: 27px; } } @media (min-width: 1024px) { :root { --fs-display: 36px; --fs-h1: 28px; --fs-h2: 21px; } } /* ========================================================================== 10. BASE RESET (optional convenience — products may opt in) ========================================================================== */ .ggultoon-base { background: var(--bg-app); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--leading-body); letter-spacing: var(--tracking-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ggultoon-base *, .ggultoon-base *::before, .ggultoon-base *::after { box-sizing: border-box; }