/**
 * DỰ ÁN: BẢO TÀNG KÝ ỨC TRƯƠNG QUANG TRỌNG (LDP-TRUONG-QUANG-TRONG)
 * Tệp: website/css/variables.css
 * Tiêu chuẩn: Central Design Tokens SSOT theo quy định tại AGENTS.md (Mục 4.3)
 * Ngôn ngữ thị giác: Tân học Pháp - Việt (1919-1926) & Chất Thép Ngục Kon Tum (1931)
 * Đặc trưng: Góc vát kiến trúc (chamfered), viền kép di sản (double borders), 
 *           tuyệt đối không bo tròn (0px radius), chất liệu giấy lưu trữ & đá ngục.
 */

:root {
    /* ==========================================================================
       1. BẢNG MÀU CHỦ ĐẠO (REVOLUTIONARY & PERIOD COLOR PALETTE)
       ========================================================================== */
    
    /* 🔴 ĐỎ CÁCH MẠNG & HUYẾT LỆ (REVOLUTIONARY CRIMSON) */
    --color-crimson-black: #2a0000;    /* Đỏ đen huyết trầm */
    --color-crimson-dark: #4a0000;     /* Đỏ thẫm máu đào */
    --color-crimson: #8b0000;          /* Đỏ sẫm huyết lệ - Màu chủ đạo */
    --color-crimson-light: #b91c1c;    /* Đỏ cờ cách mạng */
    --color-crimson-bright: #dc2626;   /* Đỏ rực lửa đấu tranh */
    --color-crimson-rgb: 139, 0, 0;
    
    /* 🟡 VÀNG ÁNH SAO, KHÍ TIẾT & ĐỒNG TƯỢNG ĐÀI (HERITAGE GOLD) */
    --color-gold-deep: #5e4303;        /* Đồng xỉn thời gian */
    --color-gold-dark: #8c6508;        /* Vàng đồng cổ điển */
    --color-gold: #b8860b;             /* Vàng huy hiệu & đường viền */
    --color-gold-light: #d97706;       /* Vàng ánh kim */
    --color-gold-bright: #f59e0b;      /* Vàng sao rực rỡ */
    --color-gold-cream: #fef3c7;       /* Vàng ngà ánh kim */
    --color-gold-rgb: 184, 134, 11;

    /* ⚫ XÁM ĐÁ KON TUM & XIỀNG XÍCH LAO NGOÀI (PRISON STONE & STEEL) */
    --color-iron-black: #0b0f19;       /* Đêm đen ngục tối - Nền sâu */
    --color-iron-dark: #111827;        /* Đá xám Kon Tum */
    --color-iron-stone: #1f2937;       /* Khung sắt Lao Ngoài */
    --color-iron-muted: #374151;       /* Xích xiềng đế quốc */
    --color-iron-plate: #28303f;       /* Tấm thép mờ */
    --color-iron-rgb: 31, 41, 55;

    /* 🟤 NÂU ĐẤT BAZAN TÂY NGUYÊN & ĐƯỜNG MÁU 14 (BAZALT & EARTH) */
    --color-bazan-dark: #451a03;       /* Rừng thiêng nước độc */
    --color-bazan: #78350f;            /* Đất đỏ bazan Đăk Pao */
    --color-bazan-light: #92400e;      /* Sông Đăk Bla mùa lũ */

    /* 📜 NỀN GIẤY LƯU TRỮ ARCHIVAL & THẺ CĂN CƯỚC 1925 (PARCHMENT) */
    --color-parchment: #faf8f5;        /* Trắng ngà thanh nhã */
    --color-parchment-light: #ffffff;
    --color-parchment-warm: #f5f0e6;   /* Màu giấy căn cước 1925 */
    --color-parchment-dark: #ebe3d3;   /* Giấy ố thời gian */
    --color-parchment-border: #dcd2be; /* Viền tài liệu cổ */
    --color-parchment-border-dark: #c4b69c;

    /* 📝 MÀU CHỮ NỘI DUNG (TYPOGRAPHY COLORS) */
    --color-text-title: #0f172a;
    --color-text-main: #1e293b;
    --color-text-muted: #475569;
    --color-text-subtle: #64748b;
    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: #cbd5e1;
    --color-text-gold: #b8860b;

    /* ==========================================================================
       2. TYPOGRAPHY CHUẨN TÂN HỌC & BẢO TÀNG LỊCH SỬ QUỐC GIA
       ========================================================================== */
    --font-serif: 'Lora', 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cinzel', 'Lora', Georgia, serif;

    /* 📐 KÍCH THƯỚC CHỮ */
    --text-2xs: 0.6875rem; /* 11px */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */

    /* 📏 KHOẢNG CÁCH (SPACING) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ==========================================================================
       3. BÃI BỎ BO TRÒN - THIẾT LẬP TOKENS GÓC VUÔNG & VÁT CẠNH (CHAMFERED)
       ========================================================================== */
    /* Triệt tiêu hoàn toàn viền tròn mềm yếu */
    --radius-none: 0px;
    --radius-sharp: 1px;
    --radius-micro: 2px;
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-2xl: 0px;
    --radius-full: 0px;

    /* Góc vát kiến trúc (Chamfered Cuts) đanh thép như đá tảng & xà lim */
    --clip-chamfer-xs: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    --clip-chamfer-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    --clip-chamfer-md: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    --clip-chamfer-lg: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    --clip-chamfer-hero: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
    
    /* Vát góc đơn (Single / Diagonal corner cut) cho thẻ bài & nhãn phân loại */
    --clip-cut-tr: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    --clip-cut-br: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    --clip-cut-both-diag: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);

    /* ==========================================================================
       4. KHUNG VIỀN DI SẢN THỜI KỲ PHÁP - VIỆT & NGỤC THÉP (PERIOD BORDERS)
       ========================================================================== */
    --border-heritage-single: 1px solid var(--color-parchment-border);
    --border-heritage-subtle: 1px solid rgba(184, 134, 11, 0.25);
    --border-heritage-double: 3px double var(--color-gold);
    --border-heritage-crimson-double: 3px double var(--color-crimson);
    --border-heritage-white-double: 3px double rgba(255, 255, 255, 0.4);
    --border-iron-hairline: 1px solid rgba(255, 255, 255, 0.1);
    --border-iron-thick: 2px solid var(--color-iron-stone);
    --border-iron-frame: 1px solid var(--color-iron-muted);
    --border-crimson-accent: 3px solid var(--color-crimson);
    --border-gold-accent: 2px solid var(--color-gold);

    /* ==========================================================================
       5. CHẤT LIỆU BỀ MẶT (ARCHIVAL NOISE & TEXTURE)
       ========================================================================== */
    --texture-noise-filter: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");

    /* ==========================================================================
       6. ĐỘ ĐỔ BÓNG KIẾN TRÚC & PHẲNG (ARCHITECTURAL ELEVATIONS)
       ========================================================================== */
    --shadow-architectural-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-architectural-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-architectural-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
    --shadow-iron-deep: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-crimson: 0 10px 25px -5px rgba(139, 0, 0, 0.4);
    --shadow-gold: 0 10px 25px -5px rgba(184, 134, 11, 0.3);

    /* ⏱️ TRANSITION & TIMING */
    --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
    --transition-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
    --transition-slow: 450ms cubic-bezier(0.2, 0, 0, 1);

    /* 층 Z-INDEX LAYERING */
    --z-base: 1;
    --z-sticky: 20;
    --z-nav: 50;
    --z-modal-backdrop: 90;
    --z-modal: 100;
    --z-toast: 110;
}