/*!
 * Theme newnet-v2 — DESIGN TOKENS (nguồn duy nhất của mọi giá trị thiết kế)
 *
 * - Màu GỐC (--nn-brand, --nn-deep, --nn-glow, --nn-accent, --nn-accent-2, --nn-ink, --nn-success, --nn-danger, --nn-warning,
 *   --nn-highlight, --nn-amber, --nn-rose, --nn-indigo) khai báo trong data/theme.php và được in vào <head>.
 *   File này CHỈ tính các sắc độ từ màu gốc — không viết mã màu cứng ở đây hay ở bất kỳ file CSS nào khác.
 * - Mọi component/page CSS phải dùng var(--nn-*) thay cho giá trị cứng.
 * - Breakpoint (không dùng được biến trong @media, ghi chú để thống nhất):
 *     sm ≥ 576px · md ≥ 768px · lg ≥ 992px · xl ≥ 1100px (menu desktop) · 2xl ≥ 1280px
 *     Dùng max-width: <bp> - .02px cho truy vấn "nhỏ hơn" (vd. max-width: 767.98px).
 */
:root {
    /* ======================================================================
       COLOR — các thang & vai trò tính từ màu gốc
       ====================================================================== */
    /* Thang màu brand */
    --nn-brand-50: color-mix(in srgb, var(--nn-brand) 6%, #fff);
    --nn-brand-100: color-mix(in srgb, var(--nn-brand) 12%, #fff);
    --nn-brand-200: color-mix(in srgb, var(--nn-brand) 25%, #fff);
    --nn-brand-300: color-mix(in srgb, var(--nn-brand) 50%, #fff);
    --nn-brand-400: color-mix(in srgb, var(--nn-brand) 76%, #fff);
    --nn-brand-600: color-mix(in srgb, var(--nn-brand) 88%, #000);
    --nn-brand-700: color-mix(in srgb, var(--nn-brand) 76%, #000);
    --nn-brand-900: color-mix(in srgb, var(--nn-brand) 45%, #000);

    /* Thang nền đậm (từ --nn-deep) */
    --nn-deep-700: color-mix(in srgb, var(--nn-deep) 78%, var(--nn-brand));   /* đầu gradient sáng hơn */
    --nn-deep-900: color-mix(in srgb, var(--nn-deep) 78%, #000);              /* footer */
    --nn-deep-950: color-mix(in srgb, var(--nn-deep) 45%, #000);              /* hero trang chủ, khối CTA */

    /* Thang màu nhấn */
    --nn-accent-50: color-mix(in srgb, var(--nn-accent) 6%, #fff);
    --nn-accent-100: color-mix(in srgb, var(--nn-accent) 14%, #fff);
    --nn-accent-300: color-mix(in srgb, var(--nn-accent) 60%, #fff);
    --nn-accent-600: color-mix(in srgb, var(--nn-accent) 82%, #000);
    --nn-accent-2-50: color-mix(in srgb, var(--nn-accent-2) 6%, #fff);
    --nn-accent-2-100: color-mix(in srgb, var(--nn-accent-2) 20%, #fff);
    --nn-accent-2-300: color-mix(in srgb, var(--nn-accent-2) 70%, #fff);
    --nn-accent-2-600: color-mix(in srgb, var(--nn-accent-2) 80%, #000);

    /* Vai trò sử dụng */
    --nn-primary: var(--nn-brand);
    --nn-primary-hover: var(--nn-brand-600);
    --nn-primary-soft: var(--nn-brand-100);
    --nn-cyan: var(--nn-glow);
    --nn-cyan-soft: var(--nn-brand-100);
    --nn-gradient: linear-gradient(120deg, var(--nn-brand-600) 0%, var(--nn-brand) 50%, var(--nn-glow) 100%);
    /* Nền khối màu: hero trang con, topbar, footer, khối CTA — tính từ --nn-deep */
    --nn-bg-brand: linear-gradient(160deg, var(--nn-deep) 0%, var(--nn-deep-700) 100%);
    --nn-glow-soft: color-mix(in srgb, var(--nn-glow) 70%, #fff);                /* chữ/điểm sáng nhạt trên nền đậm */

    /* Trung tính — tính từ --nn-ink (chữ) và --nn-brand (nền nhạt) */
    --nn-ink-900: color-mix(in srgb, var(--nn-ink) 70%, #000);
    --nn-text: color-mix(in srgb, var(--nn-ink) 82%, #fff);
    --nn-muted: color-mix(in srgb, var(--nn-ink) 62%, #fff);
    --nn-subtle: color-mix(in srgb, var(--nn-ink) 42%, #fff);
    --nn-border-strong: color-mix(in srgb, var(--nn-ink) 20%, #fff);
    --nn-border: color-mix(in srgb, var(--nn-ink) 11%, #fff);
    --nn-line: color-mix(in srgb, var(--nn-ink) 13%, var(--nn-brand-50));
    --nn-bg: #fff;
    --nn-surface: color-mix(in srgb, var(--nn-brand) 4%, #fff);
    --nn-surface-2: color-mix(in srgb, var(--nn-brand) 6%, color-mix(in srgb, var(--nn-ink) 3%, #fff));

    /* Trạng thái */
    --nn-success-soft: color-mix(in srgb, var(--nn-success) 10%, #fff);
    --nn-success-400: color-mix(in srgb, var(--nn-success) 65%, #fff);
    --nn-success-700: color-mix(in srgb, var(--nn-success) 70%, #000);
    --nn-danger-soft: color-mix(in srgb, var(--nn-danger) 10%, #fff);
    --nn-danger-700: color-mix(in srgb, var(--nn-danger) 75%, #000);
    --nn-warning-soft: color-mix(in srgb, var(--nn-warning) 10%, #fff);
    --nn-warning-700: color-mix(in srgb, var(--nn-warning) 78%, #000);
    --nn-highlight-200: color-mix(in srgb, var(--nn-highlight) 45%, #fff);

    /* Overlay & phủ trên nền màu */
    --nn-overlay: color-mix(in srgb, var(--nn-ink) 55%, transparent);
    --nn-on-brand: #fff;
    --nn-on-brand-muted: color-mix(in srgb, #fff 78%, transparent);
    --nn-glass: color-mix(in srgb, #fff 16%, transparent);
    --nn-glass-border: color-mix(in srgb, #fff 30%, transparent);

    /* ======================================================================
       TYPOGRAPHY
       ====================================================================== */
    --nn-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Cỡ chữ (base 16px) */
    --nn-text-3xs: .6875rem;   /* 11px */
    --nn-text-2xs: .75rem;     /* 12px */
    --nn-text-xs: .8125rem;    /* 13px */
    --nn-text-sm: .875rem;     /* 14px */
    --nn-text-md: .9375rem;    /* 15px — chữ phụ, nút */
    --nn-text-base: 1rem;      /* 16px — body */
    --nn-text-lg: 1.0625rem;   /* 17px */
    --nn-text-xl: 1.125rem;    /* 18px */
    --nn-text-2xl: 1.25rem;    /* 20px */
    --nn-text-3xl: 1.5rem;     /* 24px */
    --nn-text-4xl: 1.875rem;   /* 30px */
    --nn-text-5xl: 2.25rem;    /* 36px */
    --nn-text-6xl: 3rem;       /* 48px */

    /* Tiêu đề co giãn theo màn hình */
    --nn-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --nn-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
    --nn-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --nn-h4: var(--nn-text-2xl);
    --nn-h5: var(--nn-text-lg);
    --nn-h6: var(--nn-text-md);
    --nn-display: clamp(2.375rem, 1.4rem + 3.4vw, 4.25rem);
    --nn-title: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);       /* tiêu đề section */
    --nn-lead: clamp(1rem, .95rem + .25vw, 1.125rem);       /* đoạn dẫn */

    /* Độ đậm */
    --nn-weight-regular: 400;
    --nn-weight-medium: 500;
    --nn-weight-semibold: 600;
    --nn-weight-bold: 700;
    --nn-weight-extrabold: 800;

    /* Chiều cao dòng */
    --nn-leading-none: 1;
    --nn-leading-tight: 1.12;
    --nn-leading-snug: 1.35;
    --nn-leading-normal: 1.65;
    --nn-leading-relaxed: 1.8;

    /* Khoảng cách chữ */
    --nn-tracking-tighter: -.03em;
    --nn-tracking-tight: -.015em;
    --nn-tracking-normal: 0;
    --nn-tracking-wide: .08em;
    --nn-tracking-wider: .14em;

    /* Cỡ icon */
    --nn-icon-xs: 14px;
    --nn-icon-sm: 16px;
    --nn-icon-md: 18px;
    --nn-icon-lg: 20px;
    --nn-icon-xl: 24px;

    /* ======================================================================
       SPACING — bước 2px tới 28px, sau đó bước lớn
       ====================================================================== */
    --nn-space-0: 0;
    --nn-space-0-5: 2px;
    --nn-space-1: 4px;
    --nn-space-1-5: 6px;
    --nn-space-2: 8px;
    --nn-space-2-5: 10px;
    --nn-space-3: 12px;
    --nn-space-3-5: 14px;
    --nn-space-4: 16px;
    --nn-space-4-5: 18px;
    --nn-space-5: 20px;
    --nn-space-5-5: 22px;
    --nn-space-6: 24px;
    --nn-space-6-5: 26px;
    --nn-space-7: 28px;
    --nn-space-8: 32px;
    --nn-space-9: 36px;
    --nn-space-10: 40px;
    --nn-space-11: 44px;
    --nn-space-12: 48px;
    --nn-space-14: 56px;
    --nn-space-16: 64px;
    --nn-space-18: 72px;
    --nn-space-20: 80px;
    --nn-space-24: 96px;
    --nn-space-32: 128px;

    /* Khoảng đệm section (co giãn) */
    --nn-section-y: clamp(56px, 4rem + 3vw, 104px);
    --nn-section-y-tight: clamp(40px, 2rem + 2vw, 64px);
    --nn-section-y-loose: clamp(72px, 4rem + 4vw, 128px);

    /* ======================================================================
       LAYOUT & GRID
       ====================================================================== */
    --nn-container: 1200px;
    --nn-container-narrow: 820px;
    --nn-container-wide: 1320px;
    --nn-gutter: 20px;
    --nn-grid-gap: 24px;
    --nn-grid-gap-lg: 32px;
    --nn-header-h: 72px;
    --nn-topbar-h: 38px;

    /* ======================================================================
       RADIUS
       ====================================================================== */
    --nn-radius-2xs: 4px;
    --nn-radius-xs: 6px;
    --nn-radius-sm: 8px;
    --nn-radius-md: 12px;
    --nn-radius: 14px;          /* mặc định */
    --nn-radius-lg: 18px;
    --nn-radius-xl: 22px;       /* card */
    --nn-radius-2xl: 28px;      /* card lớn, section box */
    --nn-radius-3xl: 36px;
    --nn-radius-pill: 999px;
    --nn-radius-round: 50%;

    /* ======================================================================
       EFFECTS — bóng đổ, viền sáng, blur
       ====================================================================== */
    --nn-shadow-xs: 0 1px 2px color-mix(in srgb, var(--nn-ink) 6%, transparent);
    --nn-shadow-sm: 0 1px 2px color-mix(in srgb, var(--nn-ink) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--nn-ink) 5%, transparent);
    --nn-shadow: 0 4px 12px -2px color-mix(in srgb, var(--nn-ink) 8%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--nn-ink) 5%, transparent);
    --nn-shadow-lg: 0 24px 48px -16px color-mix(in srgb, var(--nn-brand-900) 22%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--nn-brand-900) 10%, transparent);
    --nn-shadow-xl: 0 40px 80px -40px color-mix(in srgb, var(--nn-brand-900) 40%, transparent);
    --nn-shadow-brand: 0 10px 24px -10px color-mix(in srgb, var(--nn-brand) 70%, transparent);
    --nn-ring: 0 0 0 4px color-mix(in srgb, var(--nn-brand) 18%, transparent);
    --nn-ring-danger: 0 0 0 4px color-mix(in srgb, var(--nn-danger) 15%, transparent);
    --nn-blur-sm: 6px;
    --nn-blur: 14px;
    --nn-blur-lg: 90px;

    /* ======================================================================
       MOTION
       ====================================================================== */
    --nn-ease: cubic-bezier(.2, .7, .2, 1);          /* chuẩn */
    --nn-ease-out: cubic-bezier(.16, 1, .3, 1);       /* nhấn mạnh, mượt cuối */
    --nn-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --nn-duration-fast: 150ms;
    --nn-duration: 250ms;
    --nn-duration-slow: 500ms;
    --nn-duration-slower: 900ms;

    /* ======================================================================
       Z-INDEX
       ====================================================================== */
    --nn-z-below: -1;
    --nn-z-base: 1;
    --nn-z-raised: 2;
    --nn-z-dropdown: 50;    /* danh sách thả xuống trong trang (nn-combo) */
    --nn-z-float: 900;      /* nút lên đầu trang, nút liên hệ nổi */
    --nn-z-header: 1000;
    --nn-z-overlay: 1090;
    --nn-z-panel: 1100;
    --nn-z-progress: 1200;
    --nn-z-toast: 1300;
    --nn-z-skip: 2000;
}