/* =============================================================
 * HiiForest — shared design tokens
 * Source-of-truth color / typography variables for landing + /app/
 *
 * Import order (recommended):
 *   1. /shared/design-tokens.css  (this file — defines vars)
 *   2. page-specific stylesheet   (consumes vars)
 *   3. /shared/nordic-overrides.css if any per-surface skin
 *
 * Keep this file FREE of selectors that paint anything by themselves.
 * It only defines :root variables so every page can opt-in safely.
 * ============================================================= */

:root {
    /* === v14 LIGHT NORDIC MINIMAL ===
     * Variable names preserved from v13 so existing consumers (landing, /app/, /admin/)
     * keep working — only values flip from dark forest to off-white minimal.
     */

    /* --- Brand palette (forest green, deeper for white bg contrast) --- */
    --hii-primary:      #4A6741;   /* main forest green (was #2ecc71 too bright on white) */
    --hii-primary-dk:   #3A5232;   /* hover / pressed */
    --hii-primary-soft: rgba(74, 103, 65, 0.10);
    --hii-primary-tint: rgba(74, 103, 65, 0.04);

    /* --- Surface (Nordic minimal LIGHT) --- */
    --hii-bg-deepest:   #FAFAF7;   /* page bg — off-white */
    --hii-bg-panel:     #FFFFFF;   /* nav, sidebar, panels, cards */
    --hii-bg-elev:      #F1EFE8;   /* hover, alternating sections */
    --hii-bg-glass:     rgba(250, 250, 247, 0.88);  /* sticky nav glass */

    /* --- Text (inverted: dark on light) --- */
    --hii-text:         #1F2937;   /* primary text, headings */
    --hii-text-mute:    #6B7280;   /* labels, meta */
    --hii-text-soft:    #4A5568;   /* secondary body */

    /* --- Accent / semantic (tuned for light bg) --- */
    --hii-accent-info:  #4A6F8A;   /* info blue (was #3498db too bright) */
    --hii-accent-warn:  #D4956A;   /* warm orange (replaces #f39c12, also the B-palette accent) */
    --hii-accent-danger:#B8543D;   /* terracotta error */
    --hii-accent-sage:  #9CAF88;   /* soft sage for tertiary highlights */

    /* --- Borders & rules --- */
    --hii-border:       rgba(74, 103, 65, 0.20);
    --hii-border-soft:  rgba(31, 41, 55, 0.08);
    --hii-border-med:   rgba(31, 41, 55, 0.16);

    /* --- Typography (multilingual: zh-TW + ja + en, single stack) ---
     * The browser picks per-character glyph from the first font in the
     * stack that supports it. Order matters: Latin first, then CJK,
     * with platform fallbacks last. */
    --hii-font-sans:    "Inter", "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Hiragino Kaku Gothic ProN", "Microsoft JhengHei", "Yu Gothic UI", Roboto, sans-serif;
    --hii-font-serif:   "Noto Serif TC", "Noto Serif JP", "Source Serif Pro", "Hiragino Mincho ProN", Georgia, serif;
    --hii-font-display: "Klee One", "Noto Serif TC", "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
    --hii-font-mono:    "JetBrains Mono", "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;

    /* --- Radius, shadow, motion --- */
    --hii-radius-sm:    6px;
    --hii-radius:       10px;
    --hii-radius-lg:    14px;
    --hii-radius-full:  999px;
    /* Light theme shadows are SOFTER and smaller (light bg shows shadows less prominently) */
    --hii-shadow-sm:    0 1px 2px rgba(31, 41, 55, 0.04), 0 1px 4px rgba(31, 41, 55, 0.04);
    --hii-shadow:       0 4px 20px rgba(31, 41, 55, 0.06);
    --hii-shadow-lg:    0 12px 40px rgba(31, 41, 55, 0.10);
    --hii-ease:         cubic-bezier(.4, 0, .2, 1);
    --hii-dur-fast:     120ms;
    --hii-dur:          200ms;
    --hii-dur-slow:     320ms;

    /* === Legacy aliases (so older CSS using the dark-name variants still works) === */
    --bg-base:          var(--hii-bg-deepest);
    --bg-elevated:      var(--hii-bg-panel);
    --bg-muted:         var(--hii-bg-elev);
    --text-primary:     var(--hii-text);
    --text-secondary:   var(--hii-text-soft);
    --text-tertiary:    var(--hii-text-mute);
    --forest:           var(--hii-primary);
    --forest-deep:      var(--hii-primary-dk);
    --warm:             var(--hii-accent-warn);
    --sage:             var(--hii-accent-sage);
    --border-soft:      var(--hii-border-soft);
    --border-med:       var(--hii-border-med);
}

/* === Backward-compatibility shims for pages that hardcoded dark colors ===
 * If a page still does `background: #0a0e12` directly (instead of using vars),
 * that page will look wrong until we migrate it. List of known-affected pages:
 *   - frontend/app/  (GIS app — heavy dark-mode visual; will need follow-up sweep)
 *   - frontend/admin/  (admin — check after migration)
 * Landing pages use vars correctly and should flip automatically.
 */

/* =============================================================
 * Shared utility classes for typography (use across ALL pages)
 * ============================================================= */

/* Brand display class — soft handwritten-mincho feel for elegant CJK display.
 * (hero <h1>, section titles, modal titles). Approximates JustFont 金萱.
 * Works for zh-TW AND ja via Klee One's CJK coverage.
 * To upgrade later: prepend 'jf-jinxuan' if/when licensed. */
.font-display-cn,
.font-display {
    font-family: var(--hii-font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.font-serif { font-family: var(--hii-font-serif); }
.font-mono  { font-family: var(--hii-font-mono); }