/* ================================================================
   CL THEME — Design tokens (tông nâu ấm + vàng cam, 11/2026)
   Nạp ĐẦU TIÊN trong mọi layout. Ngoài token mới (--cl-*), file này
   định nghĩa lại toàn bộ tên biến mà CSS/view của WebPage.Core dùng,
   để các trang Core/Admin không còn bị thiếu biến.
   ================================================================ */

:root {
    /* ---------- Palette gốc ---------- */
    --cl-ink-900: #0d0400;          /* nâu đen sâu nhất */
    --cl-ink-800: #160800;          /* nền chính */
    --cl-ink-700: #220d00;
    --cl-ink-600: #2c1405;          /* nâu sẫm */
    --cl-ink-500: #3a1d0a;
    --cl-ink-400: #553012;
    --cl-night: #1a0a02;            /* nâu đêm */
    --cl-night-2: #2a1306;

    --cl-gold-100: #fff1c7;
    --cl-gold-200: #f5cf5c;         /* vàng sáng */
    --cl-gold-300: #e6bd45;
    --cl-gold-400: #d4af37;         /* vàng chính */
    --cl-gold-500: #b88a1e;         /* vàng đậm */
    --cl-gold-600: #7f5b12;
    --cl-gold-a10: rgba(212, 175, 55, 0.10);
    --cl-gold-a20: rgba(212, 175, 55, 0.20);
    --cl-gold-a30: rgba(212, 175, 55, 0.30);
    --cl-gold-a50: rgba(212, 175, 55, 0.50);

    --cl-paper-100: #f7f4ee;        /* giấy sáng (thủy mặc) */
    --cl-paper-200: #ece6da;
    --cl-paper-300: #d9d1c2;
    --cl-paper-ink: #2b2620;        /* chữ trên nền giấy */
    --cl-paper-ink-2: #5d554a;

    --cl-text: #e9dcc6;             /* chữ kem */
    --cl-text-strong: #fff7e8;
    --cl-text-dim: rgba(233, 220, 198, 0.62);
    --cl-text-faint: rgba(233, 220, 198, 0.4);

    --cl-red-400: #c0392b;
    --cl-red-500: #a3281c;          /* nút đỏ (khoá, huỷ) */
    --cl-red-600: #6e170f;
    --cl-ember: #ffa800;            /* cam nhấn: link active, nút viền, số tiền */
    --cl-orange: #ffa800;
    --cl-jade: #6fae8a;             /* trạng thái tốt */
    --cl-danger: #d0553f;

    --cl-line: rgba(233, 220, 198, 0.12);
    --cl-line-strong: rgba(233, 220, 198, 0.22);
    --cl-line-gold: var(--cl-gold-a30);

    /* ---------- Gradient & texture ---------- */
    --cl-grad-gold-text: linear-gradient(135deg, #d4af37 0%, #ffa800 50%, #d4af37 100%);
    --cl-grad-gold: linear-gradient(135deg, #d4af37 0%, #ffa800 50%, #d4af37 100%);
    --cl-grad-gold-line: linear-gradient(90deg, transparent, var(--cl-gold-400) 20%, var(--cl-gold-200) 50%, var(--cl-gold-400) 80%, transparent);
    --cl-grad-btn-red: linear-gradient(180deg, #b8331f 0%, #a3281c 45%, #6e170f 100%);
    --cl-grad-btn-light: linear-gradient(180deg, #fbf8f2 0%, #e9e2d4 100%);
    --cl-grad-header: linear-gradient(180deg, rgba(34, 13, 0, 0.96), rgba(34, 13, 0, 0.92));
    --cl-grad-panel: linear-gradient(180deg, rgba(44, 20, 5, 0.92), rgba(22, 8, 0, 0.94));
    /* Nền trơn dùng chung cho banner/khối không có ảnh: tối, vân giấy, quầng vàng góc trên */
    --cl-bg-plain:
        radial-gradient(ellipse at 78% 0%, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0) 58%),
        var(--cl-noise),
        linear-gradient(180deg, #2a1205 0%, #160800 100%);
    --cl-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* ---------- Typography ---------- */
    --cl-font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --cl-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --cl-tracking-display: 0.02em;
    --cl-tracking-caps: 0.06em;

    /* ---------- Layout ---------- */
    --cl-header-h: 80px;
    --cl-container: 1200px;
    --cl-container-narrow: 900px;
    --cl-container-wide: 1440px;
    --cl-gutter: 24px;
    --cl-radius: 8px;
    --cl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cl-dur: 0.35s;
    --cl-dur-slow: 0.8s;

    /* ---------- Z-index ---------- */
    --cl-z-header: 1000;
    --cl-z-fpnav: 900;
    --cl-z-overlay: 1400;
    --cl-z-modal: 1500;

    /* ================================================================
       Ánh xạ sang tên biến của WebPage.Core (giữ tên, đổi giá trị)
       ================================================================ */
    --color-bg-primary: var(--cl-ink-800);
    --color-bg-secondary: var(--cl-ink-700);
    --color-bg-tertiary: var(--cl-ink-600);
    --color-bg-card: rgba(44, 20, 5, 0.85);
    --color-bg-card-hover: rgba(58, 29, 10, 0.95);
    --color-bg-surface: var(--cl-ink-700);
    --color-bg-overlay: rgba(13, 4, 0, 0.88);
    --color-bg-navbar: rgba(13, 4, 0, 0.92);
    --color-bg-input: rgba(13, 4, 0, 0.55);

    --color-blood: var(--cl-red-500);
    --color-blood-bright: var(--cl-red-400);
    --color-blood-deep: var(--cl-red-600);

    --color-gold-primary: var(--cl-gold-400);
    --color-gold-secondary: var(--cl-gold-300);
    --color-gold-bright: var(--cl-gold-200);
    --color-gold-light: var(--cl-gold-100);
    --color-gold-dark: var(--cl-gold-500);
    --color-gold-muted: var(--cl-gold-600);

    --color-line: var(--cl-line-strong);
    --color-line-soft: var(--cl-line);
    --color-border: var(--cl-line-strong);
    --color-border-card: var(--cl-line-gold);
    --color-border-primary: var(--cl-gold-a50);

    --color-text: var(--cl-text);
    --color-text-primary: var(--cl-text);
    --color-text-secondary: var(--cl-text-dim);
    --color-text-muted: var(--cl-text-faint);
    --color-text-heading: var(--cl-gold-200);
    --color-text-gold: var(--cl-gold-200);
    --color-text-link: var(--cl-gold-200);
    --color-text-link-hover: var(--cl-gold-100);

    --color-accent-red: var(--cl-red-500);
    --color-accent-red-bright: var(--cl-danger);
    --color-accent-blue: var(--cl-night-2);
    --color-accent-green: #3d6b52;
    --color-accent-green-bright: var(--cl-jade);
    --color-accent-orange: var(--cl-ember);
    --color-accent-yellow: var(--cl-gold-200);
    --color-red: var(--cl-danger);
    --color-green: var(--cl-jade);
    --color-cyan: var(--cl-gold-200);           /* tông cyan cũ quy về vàng */
    --color-cyan-dim: var(--cl-gold-a30);

    --color-online: var(--cl-jade);
    --color-offline: var(--cl-danger);
    --color-warning: var(--cl-ember);
    --color-status-online: var(--cl-jade);
    --color-status-offline: var(--cl-danger);
    --color-rate-high: var(--cl-jade);
    --color-rate-medium: var(--cl-ember);
    --color-rate-low: var(--cl-danger);

    --font-heading: var(--cl-font-display);
    --font-body: var(--cl-font-body);
    --font-display: var(--cl-font-display);
    --font-hero: var(--cl-font-display);
    --font-mono: 'Consolas', 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    --font-size-hero: clamp(48px, 7vw, 104px);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 700;
    --line-height-tight: 1.15;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --spacing-2xl: var(--space-2xl);

    --border-gold: 1px solid var(--cl-gold-a30);
    --border-gold-bright: 1px solid var(--cl-gold-400);
    --border-subtle: 1px solid var(--cl-line);
    --border-card: 1px solid var(--cl-gold-a20);
    --border-radius-sm: var(--cl-radius);
    --border-radius-md: var(--cl-radius);
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;
    --radius-sm: var(--cl-radius);
    --radius-md: var(--cl-radius);
    --radius-lg: 10px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--cl-gold-a30);
    --shadow-glow-gold: 0 0 24px rgba(255, 168, 0, 0.18);
    --shadow-glow-gold-strong: 0 0 32px rgba(255, 168, 0, 0.32);
    --shadow-glow-blood: 0 0 28px rgba(143, 42, 31, 0.45);
    --shadow-glow-cyan: var(--shadow-glow-gold);

    --ease-out: var(--cl-ease-out);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: all 0.15s var(--cl-ease);
    --transition-base: all 0.3s var(--cl-ease);
    --transition-slow: all 0.5s var(--cl-ease);
    --transition-smooth: all 0.6s var(--ease-in-out);

    --container-max: var(--cl-container);
    --container-wide: var(--cl-container-wide);
    --navbar-height: var(--cl-header-h);
    --sidebar-width: 260px;
    --section-padding: 96px 24px;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-navbar: var(--cl-z-header);
    --z-modal-backdrop: var(--cl-z-overlay);
    --z-modal: var(--cl-z-modal);
    --z-tooltip: 1600;
    --z-noise: 9000;
}