/* Ngo Hoang Nguyen theme — design tokens (Phase 2). * * ONE token system, TWO color schemes. Light is the default and works with no * attribute on . Dark is delivered by overriding *semantic* tokens only — * never by duplicating component rules (see theme.css). The theme-mode contract * (frozen for the Phase 3 switch) is: * * :root -> Light defaults * :root:not([data-theme="light"]) + @media (prefers-color-scheme: dark) * -> System dark when no explicit choice * [data-theme="dark"] -> Explicit dark (wins over a light OS) * [data-theme="light"] -> Explicit light (wins over a dark OS) * * Phase 3 owns the visible switch, its persistence, and the early boot script. * Phase 2 only freezes and proves the CSS cascade. No JavaScript ships here. * * All tokens are namespaced --nhn-* to avoid colliding with Core-, plugin-, or * Page-Builder-injected custom properties inside the shared document. */ :root { /* -- Color primitives (raw palette, not consumed directly by components) -- */ --nhn-cyan-400: #6ceeff; --nhn-cyan-500: #11d6f0; /* Mulan accent DNA (rgb 17 214 240) */ --nhn-cyan-700: #137395; /* Mulan card-title hover; AA text on light */ --nhn-cyan-800: #0d5c78; --nhn-white: #ffffff; --nhn-gray-25: #f7f9fc; /* Mulan canvas tint */ --nhn-gray-50: #f4f5f9; --nhn-gray-100: #eeeeee; --nhn-gray-200: #e0e0e0; --nhn-gray-300: #dedede; --nhn-gray-500: #888888; --nhn-gray-600: #6b6b6b; --nhn-gray-700: #555555; --nhn-gray-900: #1b1b1b; --nhn-ink-900: #101010; /* Dark canvas DNA */ --nhn-ink-800: #191919; /* Dark surface DNA */ --nhn-ink-700: #242323; /* Dark muted DNA */ /* -- Semantic colors (Light) -- */ --nhn-canvas: var(--nhn-gray-25); --nhn-surface: var(--nhn-white); --nhn-surface-muted: var(--nhn-gray-50); --nhn-surface-header: var(--nhn-white); --nhn-surface-footer: var(--nhn-gray-900); --nhn-text: #4d4d4d; /* body; ~7:1 on canvas */ --nhn-text-strong: var(--nhn-gray-900); --nhn-heading: var(--nhn-gray-900); --nhn-text-muted: var(--nhn-gray-600); --nhn-text-on-footer: rgba(255, 255, 255, 0.82); --nhn-border: var(--nhn-gray-300); --nhn-border-subtle: var(--nhn-gray-100); --nhn-divider: var(--nhn-gray-200); --nhn-accent: var(--nhn-cyan-500); --nhn-accent-ink: var(--nhn-cyan-700); /* accent used as text on light */ --nhn-accent-contrast: #06252d; /* text on an accent-filled surface */ --nhn-link: var(--nhn-cyan-700); --nhn-link-hover: var(--nhn-cyan-800); --nhn-focus-ring: var(--nhn-cyan-800); /* >= 3:1 vs light surfaces */ --nhn-selection-bg: var(--nhn-cyan-400); --nhn-selection-text: var(--nhn-ink-900); --nhn-card-surface: var(--nhn-white); --nhn-card-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); --nhn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); /* Mulan shell (Phase 4F) */ --nhn-rail-surface: var(--nhn-gray-25); --nhn-rail-tint: rgba(17, 214, 240, 0.3); --nhn-avatar-ring: #b0ecf3; --nhn-hero-overlay: rgba(0, 0, 0, 0.5); --nhn-code-surface: var(--nhn-gray-50); --nhn-code-text: #b83280; --nhn-quote-surface: var(--nhn-gray-50); --nhn-quote-border: var(--nhn-cyan-500); --nhn-table-stripe: var(--nhn-gray-25); /* Native form controls / scrollbars follow the effective scheme. */ color-scheme: light; /* -- Typography -- */ /* No web font is shipped (see TYPOGRAPHY-AND-ICON-LEDGER.md): the source relies on remote Google Fonts (Poppins/Raleway), which cannot be fetched at runtime and, in Poppins' case, lacks Vietnamese glyph coverage. The system stack renders full Vietnamese diacritics on every target OS. */ --nhn-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --nhn-font-heading: var(--nhn-font-body); --nhn-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; --nhn-weight-normal: 400; --nhn-weight-medium: 500; --nhn-weight-semibold: 600; --nhn-weight-bold: 700; --nhn-text-xs: 0.75rem; /* 12px — meta */ --nhn-text-sm: 0.8125rem; /* 13px */ --nhn-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --nhn-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --nhn-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --nhn-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --nhn-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --nhn-h1: clamp(1.875rem, 1.4rem + 2.1vw, 2.75rem); --nhn-leading-tight: 1.22; --nhn-leading-snug: 1.4; --nhn-leading-normal: 1.7; --nhn-tracking-wide: 0.06em; /* -- Space & geometry -- */ --nhn-space-1: 0.25rem; --nhn-space-2: 0.5rem; --nhn-space-3: 0.75rem; --nhn-space-4: 1rem; --nhn-space-5: 1.5rem; --nhn-space-6: 2rem; --nhn-space-8: 3rem; --nhn-space-10: 4rem; --nhn-space-section: clamp(3rem, 2rem + 4vw, 5.5rem); --nhn-content-width: 72rem; /* shell max */ --nhn-rail-w: 285px; /* Mulan fixed rail width */ --nhn-prose-width: 44rem; /* single-post reading measure */ --nhn-grid-gap: 1.875rem; /* Mulan 30px card gutter */ --nhn-radius-sm: 4px; --nhn-radius-md: 10px; --nhn-radius-lg: 16px; --nhn-radius-pill: 999px; --nhn-border-width: 1px; /* -- Motion (tokens only; components stay static unless justified) -- */ --nhn-duration-fast: 150ms; --nhn-duration-normal: 300ms; --nhn-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* System dark: applies only when the visitor has made no explicit choice. Scoped with :not([data-theme="light"]) so a future explicit Light choice overrides a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nhn-canvas: var(--nhn-ink-900); --nhn-surface: var(--nhn-ink-800); --nhn-surface-muted: var(--nhn-ink-700); --nhn-surface-header: var(--nhn-ink-800); --nhn-surface-footer: var(--nhn-ink-800); --nhn-text: #c6c6c6; --nhn-text-strong: var(--nhn-white); --nhn-heading: var(--nhn-white); --nhn-text-muted: #a6a6a6; --nhn-text-on-footer: rgba(255, 255, 255, 0.72); --nhn-border: rgba(255, 255, 255, 0.14); --nhn-border-subtle: rgba(255, 255, 255, 0.08); --nhn-divider: rgba(255, 255, 255, 0.1); --nhn-accent: var(--nhn-cyan-500); --nhn-accent-ink: var(--nhn-cyan-400); /* bright cyan reads on dark */ --nhn-accent-contrast: #06252d; --nhn-link: var(--nhn-cyan-400); --nhn-link-hover: #a3f4ff; --nhn-focus-ring: var(--nhn-cyan-400); --nhn-selection-bg: var(--nhn-cyan-500); --nhn-selection-text: var(--nhn-ink-900); --nhn-card-surface: var(--nhn-ink-800); --nhn-card-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); --nhn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); /* Mulan shell (Phase 4F) */ --nhn-rail-surface: var(--nhn-ink-800); --nhn-rail-tint: rgba(17, 214, 240, 0.14); --nhn-avatar-ring: var(--nhn-ink-900); --nhn-hero-overlay: rgba(0, 0, 0, 0.6); --nhn-code-surface: var(--nhn-ink-700); --nhn-code-text: #f0a5cf; --nhn-quote-surface: var(--nhn-ink-700); --nhn-quote-border: var(--nhn-cyan-500); --nhn-table-stripe: rgba(255, 255, 255, 0.03); color-scheme: dark; } } /* Explicit Dark: wins even under a light OS (Phase 3 sets [data-theme]). */ [data-theme="dark"] { --nhn-canvas: var(--nhn-ink-900); --nhn-surface: var(--nhn-ink-800); --nhn-surface-muted: var(--nhn-ink-700); --nhn-surface-header: var(--nhn-ink-800); --nhn-surface-footer: var(--nhn-ink-800); --nhn-text: #c6c6c6; --nhn-text-strong: var(--nhn-white); --nhn-heading: var(--nhn-white); --nhn-text-muted: #a6a6a6; --nhn-text-on-footer: rgba(255, 255, 255, 0.72); --nhn-border: rgba(255, 255, 255, 0.14); --nhn-border-subtle: rgba(255, 255, 255, 0.08); --nhn-divider: rgba(255, 255, 255, 0.1); --nhn-accent: var(--nhn-cyan-500); --nhn-accent-ink: var(--nhn-cyan-400); --nhn-accent-contrast: #06252d; --nhn-link: var(--nhn-cyan-400); --nhn-link-hover: #a3f4ff; --nhn-focus-ring: var(--nhn-cyan-400); --nhn-selection-bg: var(--nhn-cyan-500); --nhn-selection-text: var(--nhn-ink-900); --nhn-card-surface: var(--nhn-ink-800); --nhn-card-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); --nhn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); /* Mulan shell (Phase 4F) */ --nhn-rail-surface: var(--nhn-ink-800); --nhn-rail-tint: rgba(17, 214, 240, 0.14); --nhn-avatar-ring: var(--nhn-ink-900); --nhn-hero-overlay: rgba(0, 0, 0, 0.6); --nhn-code-surface: var(--nhn-ink-700); --nhn-code-text: #f0a5cf; --nhn-quote-surface: var(--nhn-ink-700); --nhn-quote-border: var(--nhn-cyan-500); --nhn-table-stripe: rgba(255, 255, 255, 0.03); color-scheme: dark; } /* Explicit Light: restores the light scheme under a dark OS. Mirrors :root so the [data-theme] toggle is fully deterministic in Phase 3. */ [data-theme="light"] { --nhn-canvas: var(--nhn-gray-25); --nhn-surface: var(--nhn-white); --nhn-surface-muted: var(--nhn-gray-50); --nhn-surface-header: var(--nhn-white); --nhn-surface-footer: var(--nhn-gray-900); --nhn-text: #4d4d4d; --nhn-text-strong: var(--nhn-gray-900); --nhn-heading: var(--nhn-gray-900); --nhn-text-muted: var(--nhn-gray-600); --nhn-text-on-footer: rgba(255, 255, 255, 0.82); --nhn-border: var(--nhn-gray-300); --nhn-border-subtle: var(--nhn-gray-100); --nhn-divider: var(--nhn-gray-200); --nhn-accent-ink: var(--nhn-cyan-700); --nhn-link: var(--nhn-cyan-700); --nhn-link-hover: var(--nhn-cyan-800); --nhn-focus-ring: var(--nhn-cyan-800); --nhn-selection-bg: var(--nhn-cyan-400); --nhn-selection-text: var(--nhn-ink-900); --nhn-card-surface: var(--nhn-white); --nhn-card-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); --nhn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); /* Mulan shell (Phase 4F) */ --nhn-rail-surface: var(--nhn-gray-25); --nhn-rail-tint: rgba(17, 214, 240, 0.3); --nhn-avatar-ring: #b0ecf3; --nhn-hero-overlay: rgba(0, 0, 0, 0.5); --nhn-code-surface: var(--nhn-gray-50); --nhn-code-text: #b83280; --nhn-quote-surface: var(--nhn-gray-50); --nhn-quote-border: var(--nhn-cyan-500); --nhn-table-stripe: var(--nhn-gray-25); color-scheme: light; }