/*
================================================================================
HSK ++ DESIGN TOKENS (Sino-Bolivian Fusion Theme)
================================================================================
Version: 4.0.0
Description: Centralized Design Token system for the HSK Learning Platform.
             Combines traditional Chinese aesthetics (Imperial Red, Jade) with
             the Bolivian flag's vibrancy (Red, Yellow, Green), structured over
             a clean, academic Notion-like layout.

Architecture: CSS Custom Properties.
================================================================================
*/

/* ============================================================================
   GLOBAL DESIGN TOKENS
   ============================================================================ */
:root {
    /* ---- COLOR PALETTE ---- */

    /* Brand - Vibrant Red (matches logoICUMSSAPP) */
    --color-primary: #e53935; /* Vibrant Red */
    --color-primary-hover: #c62828; /* Deeper Red */
    --color-primary-subtle: #ffebee; /* Soft Red for tags */
    --color-primary-glow: rgba(229, 57, 53, 0.25);

    /* Deep Accent & Golden Accents */
    --color-secondary: #000000; /* Pure Black */
    --color-accent: #facc15; /* Vibrant Yellow */
    --color-accent-subtle: #fef9c3;

    /* Backgrounds (White & Modern Clean Gray) */
    --color-bg-app: #ffffff; /* Pure White App Canvas */
    --color-bg-panel: #ffffff; /* Pure White Panel */
    --color-bg-card: #ffffff; /* Pure White Card */
    --color-bg-input: #ffffff; /* Input background */
    --color-bg-hover: #f4f4f5; /* Light Hover (Zinc 100) */

    /* Pastel Tints for Cards / Features */
    --color-tint-peach: #fff7ed;
    --color-tint-rose: #fff1f2;
    --color-tint-mint: #f0fdf4;
    --color-tint-lavender: #faf5ff;
    --color-tint-sky: #f0f9ff;
    --color-tint-yellow: #fef9c3;

    /* Borders (Clean zinc/gray instead of warm cream) */
    --color-border: #e4e4e7; /* Zinc 200 */
    --color-border-subtle: #f4f4f5; /* Zinc 100 */
    --color-border-focus: var(--color-primary);

    /* Text (Ink Black & Zinc grays) */
    --color-text-main: #000000; /* Pure Ink Black */
    --color-text-charcoal: #18181b; /* Zinc 900 */
    --color-text-muted: #52525b; /* Zinc 600 */
    --color-text-dim: #71717a; /* Zinc 500 */
    --color-text-on-dark: #ffffff; /* On Dark */

    /* Semantic Status - Red, Yellow, Green */
    --color-success: #22c55e; /* Vibrant Green */
    --color-success-subtle: #dcfce7;
    --color-warning: #facc15; /* Vibrant Yellow */
    --color-warning-subtle: #fef9c3;
    --color-error: #ef4444; /* Vibrant Red */
    --color-error-subtle: #fee2e2;

    /* ---- TONE COLORS (Pedagogical Standard, single source of truth) ---- */
    --color-tone-1: #dc2626; /* Rojo - 1er Tono (mā) */
    --color-tone-2: #16a34a; /* Verde - 2do Tono (má) */
    --color-tone-3: #2563eb; /* Azul - 3er Tono (mǎ) */
    --color-tone-4: #7c3aed; /* Morado - 4to Tono (mà) */
    --color-tone-0: #6b7280; /* Gris - Tono Neutro/Ligero (ma) */

    /* ---- COMPATIBILITY ALIASES ---- */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent);
    --bg-app: var(--color-bg-app);
    --bg-panel: var(--color-bg-panel);
    --bg-card: var(--color-bg-card);
    --text-main: var(--color-text-main);
    --text-muted: var(--color-text-muted);
    --text-dim: var(--color-text-dim);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --error: var(--color-error);
    --primary-color: var(--color-primary);
    --card-bg: var(--color-bg-panel);
    --border-color: var(--color-border);
    --input-bg: var(--color-bg-input);
    --text-primary: var(--color-text-main);
    --text-secondary: var(--color-text-muted);

    /* ---- TYPOGRAPHY ---- */
    --font-main:
        "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, sans-serif;
    /* Display serif: carácter editorial para títulos (latín + hanzi) */
    --font-display:
        "Noto Serif SC", "Songti SC", Georgia, serif;
    --font-chinese:
        "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    /* Hanzi en serif (estilo songti de imprenta) para displays grandes:
       flashcards, cajas mi-zi-ge, héroes */
    --font-chinese-serif:
        "Noto Serif SC", "Songti SC", "Noto Sans SC", serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;

    /* Font Sizes - Notion Hierarchy */
    --text-xs: 12px; /* Micro */
    --text-sm: 14px; /* Body Small */
    --text-base: 16px; /* Body Medium */
    --text-lg: 18px; /* Subtitle */
    --text-xl: 22px; /* Heading 4 */
    --text-2xl: 28px; /* Heading 3 */
    --text-3xl: 36px; /* Heading 2 */
    --text-4xl: 48px; /* Heading 1 */
    --text-5xl: 56px; /* Display LG */

    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 700; /* Inter supports 700, use for maximum emphasis */

    /* Line Heights */
    --leading-tight: 1.15;
    --leading-normal: 1.55;
    --leading-relaxed: 1.6;

    /* Letter Spacing */
    --tracking-tight: -0.5px;
    --tracking-hero: -1px;
    --tracking-normal: 0px;

    /* ---- SPACING ---- */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-section: 64px;

    /* ---- LAYOUT ---- */
    --header-height: 64px;
    --subnav-height: 52px;
    --max-width: 1360px;

    /* ---- BORDER RADIUS ---- */
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px; /* Buttons */
    --radius-lg: 12px; /* Cards */
    --radius-xl: 16px;
    --radius-pill: 9999px; /* Status badges only, not buttons */
    --radius-full: 50%;

    /* ---- SHADOWS ---- */
    --shadow-sm: rgba(211, 47, 47, 0.04) 0px 1px 2px 0px; /* Subtle red tint shadow */
    --shadow-md: rgba(211, 47, 47, 0.06) 0px 4px 12px 0px; /* Feature cards */
    --shadow-lg: rgba(27, 25, 25, 0.16) 0px 16px 48px -8px; /* Modals */
    --shadow-xl: rgba(27, 25, 25, 0.2) 0px 24px 48px -8px; /* Mockups */
    --shadow-product: rgba(27, 25, 25, 0.2) 0px 24px 48px -8px;
    --shadow-glow: 0 0 0 3px rgba(211, 47, 47, 0.45); /* Red focus ring - WCAG 2.4.7 */
    --shadow-glow-success: 0 0 0 3px rgba(5, 150, 105, 0.45); /* Green focus ring */
    --shadow-glow-accent: 0 0 0 3px rgba(245, 158, 11, 0.45); /* Gold focus ring */

    /* ---- EFFECTS ---- */
    --backdrop-blur: blur(10px);
    --backdrop-blur-heavy: blur(20px);

    /* ---- TRANSITIONS ---- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s ease;

    /* Interactive Transform */
    --transform-active: translateY(1px); /* More subtle than Apple's scale */

    /* ---- Z-INDEX SCALE ---- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* ---- MOBILE & SAFE AREA TOKENS ---- */
    --bottom-nav-height: 60px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ============================================================================
   DARK THEME OVERRIDES
   ============================================================================
   Single source of truth for dark mode. JS only toggles the data-theme
   attribute on <html>; it must never set color properties inline.
   Zinc-950 base instead of pure black: softer on the eyes for long
   study sessions, and lets shadows/elevation still read.
   ============================================================================ */
html[data-theme="dark"] {
    /* Backgrounds */
    --color-bg-app: #09090b; /* Zinc 950 */
    --color-bg-panel: #141417;
    --color-bg-card: #141417;
    --color-bg-input: #09090b;
    --color-bg-hover: #27272a; /* Zinc 800 */

    /* Borders */
    --color-border: #27272a; /* Zinc 800 */
    --color-border-subtle: #1c1c1f;

    /* Text */
    --color-text-main: #fafafa; /* Zinc 50 — softer than pure white */
    --color-text-charcoal: #f4f4f5;
    --color-text-muted: #a1a1aa; /* Zinc 400 */
    --color-text-dim: #9ca3af; /* Zinc 400/500 — lightened to meet 4.5:1 on dark cards */

    /* Primary Brand Color brightened for WCAG AA 4.5:1 contrast on dark zinc surfaces */
    --color-primary: #f87171;
    --color-primary-hover: #fca5a5;
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --primary-color: var(--color-primary);

    /* Subtle fills: translucent so they sit on dark surfaces without glare */
    --color-primary-subtle: rgba(248, 113, 113, 0.16);
    --color-accent-subtle: rgba(250, 204, 21, 0.14);
    --color-success-subtle: rgba(34, 197, 94, 0.14);
    --color-warning-subtle: rgba(250, 204, 21, 0.14);
    --color-error-subtle: rgba(248, 113, 113, 0.16);

    /* Tone colors brightened one step for contrast on dark backgrounds (scheme A) */
    --color-tone-1: #ef4444; /* Rojo */
    --color-tone-2: #22c55e; /* Verde */
    --color-tone-3: #3b82f6; /* Azul */
    --color-tone-4: #a78bfa; /* Morado */
    --color-tone-0: #9ca3af; /* Gris */

    /* Shadows tuned for dark surfaces */
    --shadow-sm: rgba(0, 0, 0, 0.35) 0px 1px 2px 0px;
    --shadow-md: rgba(0, 0, 0, 0.45) 0px 4px 12px 0px;
    --shadow-lg: rgba(0, 0, 0, 0.6) 0px 16px 48px -8px;
    --shadow-xl: rgba(0, 0, 0, 0.65) 0px 24px 48px -8px;
    --shadow-product: rgba(0, 0, 0, 0.65) 0px 24px 48px -8px;
}

/* ============================================================================
   CHINESE CHARACTER SPECIFIC TOKENS
   ============================================================================ */
:root {
    /* Character display sizing */
    --hanzi-sm: 24px;
    --hanzi-md: 36px;
    --hanzi-lg: 48px;
    --hanzi-xl: 80px;
    --hanzi-hero: 120px;

    /* Pinyin sizing */
    --pinyin-sm: 12px;
    --pinyin-md: 14px;
    --pinyin-lg: 16px;

    /* Character weight */
    --hanzi-weight: 500;
    --hanzi-weight-light: 400;
}

/* Optimized Chinese character rendering */
.hanzi,
.chinese-char,
[lang="zh"] {
    font-family: var(--font-chinese);
    font-weight: var(--hanzi-weight);
    line-height: var(--leading-tight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1;
    color: var(--color-text-charcoal);
}

/* Pinyin */
.pinyin {
    font-family: var(--font-main);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--color-text-muted);
}

/* Tone marks need precise rendering */
.pinyin-tone {
    font-family: var(--font-main);
    unicode-range: U+0300-036F, U+00C0-00FF;
}

/* Tone Utility Classes for Dynamic Colorization */
.tone-1 { color: var(--color-tone-1) !important; }
.tone-2 { color: var(--color-tone-2) !important; }
.tone-3 { color: var(--color-tone-3) !important; }
.tone-4 { color: var(--color-tone-4) !important; }
.tone-0 { color: var(--color-tone-0) !important; }

/* ---- ALTERNATIVE TONE COLOR SCHEME ----
   1er Tono: Amarillo (#d97706 light, #facc15 dark)
   2do Tono: Azul     (#2563eb light, #60a5fa dark)
   3er Tono: Verde    (#16a34a light, #4ade80 dark)
   4to Tono: Rojo     (#dc2626 light, #f87171 dark)
   Tono 0:   Gris     (#6b7280 light, #9ca3af dark)
*/
html[data-tone-scheme="alt"],
body[data-tone-scheme="alt"] {
    --color-tone-1: #d97706; /* Amarillo / Ámbar dorado (1er Tono) */
    --color-tone-2: #2563eb; /* Azul (2do Tono) */
    --color-tone-3: #16a34a; /* Verde (3er Tono) */
    --color-tone-4: #dc2626; /* Rojo (4to Tono) */
    --color-tone-0: #6b7280; /* Gris (Neutro) */
}

html[data-theme="dark"][data-tone-scheme="alt"],
body[data-theme="dark"][data-tone-scheme="alt"],
html[data-theme="dark"] body[data-tone-scheme="alt"] {
    --color-tone-1: #facc15; /* Amarillo brillante */
    --color-tone-2: #60a5fa; /* Azul claro */
    --color-tone-3: #4ade80; /* Verde claro */
    --color-tone-4: #f87171; /* Rojo claro */
    --color-tone-0: #9ca3af; /* Gris claro */
}

/* Accesibilidad: respetar la preferencia de movimiento reducido (WCAG 2.3.3).
   Neutraliza transiciones/animaciones CSS para usuarios sensibles al movimiento.
   (Las animaciones de canvas de los juegos usan rAF y se controlan aparte.) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Accesibilidad: en tema oscuro, aclarar los títulos rojos de Cultura para
   alcanzar 4.5:1 sobre las tarjetas oscuras. (Los botones blanco-sobre-rojo usan
   el rojo más oscuro #c62828 por separado: una sola --color-primary no cubre ambos.) */
html[data-theme="dark"] :is(#culture-characters, #culture-medicine, #culture-opera, #culture-technology, #culture-clothing, #culture-arts) h3 {
    color: #ef4444;
}

/* Mismo motivo: textos rojos pequeños sobre superficies oscuras necesitan rojo
   más claro. Los valores de catálogo van sobre una tarjeta más clara (#1e1e21),
   así que usan un rojo aún más brillante para alcanzar 4.5:1. */
html[data-theme="dark"] .char-pinyin {
    color: #ef4444;
}
html[data-theme="dark"] .sr-reference-stat-value {
    color: #f87171;
}
html[data-theme="dark"] .etym-toggle-btn.is-active {
    color: #ef4444;
}

/* Localization typography adjustments */
html[lang="th"] {
    --font-main: "Sarabun", "Noto Sans Thai", "Thonburi", "Leelawadee UI", "Inter", -apple-system, system-ui, sans-serif;
    line-height: 1.6;
}

html[lang="ru"] {
    hyphens: auto;
}