/* Ngo Hoang Nguyen theme — design tokens (Phase 2; option layer R4-H6).
 *
 * ONE token system, TWO color schemes. Light is the default and works with no
 * attribute on <html>. 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.
 *
 * R4-H6 option layer: a handful of semantic tokens read an optional
 * `--nhn-opt-*` override (emitted only when the owner sets a Theme Option; see
 * partials/design-tokens.blade.php) with the ORIGINAL value as the var()
 * fallback. When no option is saved the fallback is used verbatim, so the Mulan
 * look is byte-for-byte preserved. Brand/link colours accept the override in
 * BOTH schemes (per-scheme fallback). Content colours (text/heading/muted/
 * surfaces/border) accept it in the LIGHT scheme only — the dark scheme keeps
 * its designed, contrast-safe palette so a light-tuned colour can never make
 * dark text unreadable. Type sizes multiply the shipped clamp by a bounded
 * scale, so responsiveness and the H1>H2>H3 hierarchy are kept.
 */

: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-opt-color-background, var(--nhn-gray-25));
    --nhn-surface: var(--nhn-opt-color-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: var(--nhn-opt-color-text, #4d4d4d);          /* body; ~7:1 on canvas */
    --nhn-text-strong: var(--nhn-opt-color-heading, var(--nhn-gray-900));
    --nhn-heading: var(--nhn-opt-color-heading, var(--nhn-gray-900));
    --nhn-text-muted: var(--nhn-opt-color-text-muted, var(--nhn-gray-600));
    --nhn-text-on-footer: rgba(255, 255, 255, 0.82);

    --nhn-border: var(--nhn-opt-color-border, var(--nhn-gray-300));
    --nhn-border-subtle: var(--nhn-gray-100);
    --nhn-divider: var(--nhn-gray-200);

    --nhn-accent: var(--nhn-opt-color-primary, var(--nhn-cyan-500));
    --nhn-accent-ink: var(--nhn-opt-color-secondary, var(--nhn-cyan-700));   /* accent used as text on light */
    --nhn-accent-contrast: #06252d;              /* text on an accent-filled surface */

    --nhn-link: var(--nhn-opt-color-link, var(--nhn-cyan-700));
    --nhn-link-hover: var(--nhn-opt-color-link-hover, var(--nhn-cyan-800));
    --nhn-link-active: var(--nhn-opt-color-link-active, var(--nhn-link-hover));

    --nhn-focus-ring: var(--nhn-cyan-800);       /* >= 3:1 vs light surfaces */
    --nhn-selection-bg: var(--nhn-opt-color-accent, var(--nhn-cyan-400));
    --nhn-selection-text: var(--nhn-ink-900);

    --nhn-card-surface: var(--nhn-opt-color-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: var(--nhn-opt-rail-profile, rgba(17, 214, 240, 0.3));
    --nhn-avatar-ring: var(--nhn-opt-avatar-ring, #b0ecf3);
    /* R2-V.1: 0.5 → 0.6 so white hero text/CTAs keep ≥4.5:1 over the brightest
       pixels of the hero photo (measured; matches the dark-scheme value). */
    --nhn-hero-overlay: rgba(0, 0, 0, 0.6);

    --nhn-code-surface: var(--nhn-gray-50);
    --nhn-code-text: #b83280;
    --nhn-quote-surface: var(--nhn-gray-50);
    --nhn-quote-border: var(--nhn-opt-color-accent, 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 */
    /* Body/heading sizes multiply the shipped clamp by a bounded option scale
       (default 1 → identical to the frozen scale). */
    --nhn-text-base: calc(clamp(1rem, 0.96rem + 0.2vw, 1.0625rem) * var(--nhn-opt-body-scale, 1));
    /* Article reading size — derived from the body base with its own bump; the
       on-page reader control multiplies this further at render time. */
    --nhn-text-article: calc(var(--nhn-text-base) * var(--nhn-opt-article-scale, 1));
    --nhn-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --nhn-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --nhn-h3: calc(clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem) * var(--nhn-opt-h3-scale, 1));
    --nhn-h2: calc(clamp(1.5rem, 1.25rem + 1.1vw, 2rem) * var(--nhn-opt-h2-scale, 1));
    --nhn-h1: calc(clamp(1.875rem, 1.4rem + 2.1vw, 2.75rem) * var(--nhn-opt-h1-scale, 1));

    --nhn-leading-tight: 1.22;
    --nhn-leading-snug: 1.4;
    --nhn-leading-normal: 1.7;
    --nhn-leading-body: var(--nhn-opt-leading-body, var(--nhn-leading-normal));
    --nhn-leading-article: var(--nhn-opt-leading-article, var(--nhn-leading-normal));
    --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-7: 2.5rem;              /* post-card top padding (accent-strip room) */
    --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);
    --nhn-motion: var(--nhn-duration-fast);   /* alias consumed by sections.css transitions */

    /* -- Compatibility tokens ------------------------------------------------
       Define the values previously supplied only via var() fallbacks in
       sections.css, so the custom-property audit is fully closed with NO
       rendering change. Scheme-agnostic (not overridden per scheme), matching
       the R1F.1 fallback behaviour. */
    --nhn-text-xl: 1.5rem;                            /* featured card title (>= 60rem) */
    --nhn-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);  /* card hover shadow */
}

/* 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. Content colours keep their designed dark values (no
   option override); brand/link colours accept the override with dark fallbacks. */
@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-opt-color-primary, var(--nhn-cyan-500));
        --nhn-accent-ink: var(--nhn-opt-color-secondary, var(--nhn-cyan-400));   /* bright cyan reads on dark */
        --nhn-accent-contrast: #06252d;

        --nhn-link: var(--nhn-opt-color-link, var(--nhn-cyan-400));
        --nhn-link-hover: var(--nhn-opt-color-link-hover, #a3f4ff);
        --nhn-link-active: var(--nhn-opt-color-link-active, var(--nhn-link-hover));

        --nhn-focus-ring: var(--nhn-cyan-400);
        --nhn-selection-bg: var(--nhn-opt-color-accent, 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: var(--nhn-opt-rail-profile, rgba(17, 214, 240, 0.14));
        --nhn-avatar-ring: var(--nhn-opt-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-opt-color-accent, 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-opt-color-primary, var(--nhn-cyan-500));
    --nhn-accent-ink: var(--nhn-opt-color-secondary, var(--nhn-cyan-400));
    --nhn-accent-contrast: #06252d;

    --nhn-link: var(--nhn-opt-color-link, var(--nhn-cyan-400));
    --nhn-link-hover: var(--nhn-opt-color-link-hover, #a3f4ff);
    --nhn-link-active: var(--nhn-opt-color-link-active, var(--nhn-link-hover));

    --nhn-focus-ring: var(--nhn-cyan-400);
    --nhn-selection-bg: var(--nhn-opt-color-accent, 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: var(--nhn-opt-rail-profile, rgba(17, 214, 240, 0.14));
    --nhn-avatar-ring: var(--nhn-opt-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-opt-color-accent, 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, including the
   R4-H6 option overrides. */
[data-theme="light"] {
    --nhn-canvas: var(--nhn-opt-color-background, var(--nhn-gray-25));
    --nhn-surface: var(--nhn-opt-color-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: var(--nhn-opt-color-text, #4d4d4d);
    --nhn-text-strong: var(--nhn-opt-color-heading, var(--nhn-gray-900));
    --nhn-heading: var(--nhn-opt-color-heading, var(--nhn-gray-900));
    --nhn-text-muted: var(--nhn-opt-color-text-muted, var(--nhn-gray-600));
    --nhn-text-on-footer: rgba(255, 255, 255, 0.82);

    --nhn-border: var(--nhn-opt-color-border, var(--nhn-gray-300));
    --nhn-border-subtle: var(--nhn-gray-100);
    --nhn-divider: var(--nhn-gray-200);

    --nhn-accent: var(--nhn-opt-color-primary, var(--nhn-cyan-500));
    --nhn-accent-ink: var(--nhn-opt-color-secondary, var(--nhn-cyan-700));
    --nhn-link: var(--nhn-opt-color-link, var(--nhn-cyan-700));
    --nhn-link-hover: var(--nhn-opt-color-link-hover, var(--nhn-cyan-800));
    --nhn-link-active: var(--nhn-opt-color-link-active, var(--nhn-link-hover));
    --nhn-focus-ring: var(--nhn-cyan-800);
    --nhn-selection-bg: var(--nhn-opt-color-accent, var(--nhn-cyan-400));
    --nhn-selection-text: var(--nhn-ink-900);

    --nhn-card-surface: var(--nhn-opt-color-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: var(--nhn-opt-rail-profile, rgba(17, 214, 240, 0.3));
    --nhn-avatar-ring: var(--nhn-opt-avatar-ring, #b0ecf3);
    /* R2-V.1: 0.5 → 0.6 so white hero text/CTAs keep ≥4.5:1 over the brightest
       pixels of the hero photo (measured; matches the dark-scheme value). */
    --nhn-hero-overlay: rgba(0, 0, 0, 0.6);

    --nhn-code-surface: var(--nhn-gray-50);
    --nhn-code-text: #b83280;
    --nhn-quote-surface: var(--nhn-gray-50);
    --nhn-quote-border: var(--nhn-opt-color-accent, var(--nhn-cyan-500));
    --nhn-table-stripe: var(--nhn-gray-25);

    color-scheme: light;
}