/* ==========================================================================
   01 — TOKENS
   Semua nilai desain (warna, tipografi, jarak, radius, shadow, easing)
   didefinisikan sekali di sini. File lain tidak boleh memakai nilai mentah.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------- palette */
    --kn-navy-900: #0a1f47;
    --kn-navy-800: #0f2a5c;   /* judul utama */
    --kn-navy-700: #16376f;
    --kn-ink-600:  #445880;   /* body text */
    --kn-ink-500:  #5c6f92;
    --kn-ink-400:  #8595b3;

    --kn-blue-700: #0b4bb8;
    --kn-blue-600: #0e5ad8;
    --kn-blue-500: #1a7bf0;   /* aksen utama */
    --kn-blue-400: #4a9bff;
    --kn-blue-200: #b9d6ff;
    --kn-blue-100: #e2edff;

    --kn-cyan-400: #22c4f5;
    --kn-violet-500: #8b5cf6;
    --kn-violet-400: #a78bfa;
    --kn-gold-500: #f5a623;

    --kn-white: #ffffff;

    /* ------------------------------------------------------- background */
    --kn-bg:        #eef2fd;
    --kn-bg-soft:   #f7f9ff;
    --kn-bg-deep:   #e6ecfb;

    /* ------------------------------------------------------- gradients */
    --kn-grad-brand:  linear-gradient(135deg, var(--kn-blue-500) 0%, var(--kn-blue-700) 100%);
    --kn-grad-brand-h:linear-gradient(135deg, #2e8bff 0%, #0d51c4 100%);
    --kn-grad-logo:   linear-gradient(135deg, var(--kn-cyan-400) 0%, var(--kn-blue-600) 55%, var(--kn-navy-800) 100%);
    --kn-grad-cta:    linear-gradient(100deg, #3f6ce8 0%, #6a6ce6 42%, #8f6ce2 72%, #a97be2 100%);
    --kn-grad-rule:   linear-gradient(90deg, transparent, var(--kn-blue-400));
    --kn-grad-text:   linear-gradient(100deg, var(--kn-blue-500), var(--kn-cyan-400) 60%, var(--kn-blue-600));

    /* ----------------------------------------------------------- glass */
    --kn-glass-bg:        rgba(255, 255, 255, 0.5);
    --kn-glass-bg-strong: rgba(255, 255, 255, 0.72);
    --kn-glass-bg-soft:   rgba(255, 255, 255, 0.34);
    --kn-glass-border:    rgba(255, 255, 255, 0.72);
    --kn-glass-border-in: rgba(255, 255, 255, 0.5);
    --kn-glass-blur:      18px;
    --kn-glass-blur-lg:   28px;
    --kn-glass-sat:       160%;

    /* --------------------------------------------------------- shadows */
    --kn-shadow-xs: 0 2px 6px rgba(16, 42, 92, 0.06);
    --kn-shadow-sm: 0 8px 20px -10px rgba(16, 42, 92, 0.18);
    --kn-shadow-md: 0 18px 40px -22px rgba(16, 42, 92, 0.26);
    --kn-shadow-lg: 0 34px 70px -34px rgba(16, 42, 92, 0.34);
    --kn-shadow-xl: 0 60px 110px -50px rgba(11, 35, 80, 0.45);
    --kn-shadow-blue: 0 14px 30px -12px rgba(14, 90, 216, 0.5);
    --kn-shadow-blue-h: 0 20px 40px -12px rgba(14, 90, 216, 0.62);

    /* ------------------------------------------------------ typography */
    --kn-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --kn-font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

    --kn-fs-hero:   clamp(2.25rem, 5.6vw, 3.75rem);
    --kn-fs-h2:     clamp(1.25rem, 2.2vw, 1.65rem);
    --kn-fs-h3:     clamp(1.05rem, 1.5vw, 1.3rem);
    --kn-fs-lg:     1.0625rem;
    --kn-fs-base:   0.9375rem;
    --kn-fs-sm:     0.875rem;
    --kn-fs-xs:     0.8125rem;
    --kn-fs-2xs:    0.6875rem;

    --kn-lh-tight: 1.08;
    --kn-lh-snug: 1.35;
    --kn-lh-base: 1.7;

    --kn-ls-wide:   0.08em;
    --kn-ls-wider:  0.16em;
    --kn-ls-tight: -0.02em;

    /* --------------------------------------------------------- spacing */
    --kn-space-1: 0.25rem;
    --kn-space-2: 0.5rem;
    --kn-space-3: 0.75rem;
    --kn-space-4: 1rem;
    --kn-space-5: 1.5rem;
    --kn-space-6: 2rem;
    --kn-space-7: 2.75rem;
    --kn-space-8: 3.5rem;

    --kn-section-y: clamp(3rem, 6vw, 5.25rem);
    --kn-container: 1160px;
    --kn-gutter: clamp(1.125rem, 4vw, 2.5rem);
    --kn-header-h: 84px;

    /* ---------------------------------------------------------- radius */
    --kn-r-xs: 8px;
    --kn-r-sm: 12px;
    --kn-r-md: 16px;
    --kn-r-lg: 22px;
    --kn-r-xl: 28px;
    --kn-r-pill: 999px;

    /* ---------------------------------------------------------- motion */
    --kn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --kn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --kn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --kn-dur-fast: 160ms;
    --kn-dur: 320ms;
    --kn-dur-slow: 620ms;

    /* ----------------------------------------------------------- layer */
    --kn-z-backdrop: 0;
    --kn-z-content: 1;
    --kn-z-header: 60;
    --kn-z-drawer: 80;
    --kn-z-top: 90;
}

/* Fallback saat browser tidak mendukung backdrop-filter:
   opasitas panel dinaikkan supaya teks tetap kontras. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --kn-glass-bg: rgba(255, 255, 255, 0.86);
        --kn-glass-bg-strong: rgba(255, 255, 255, 0.94);
        --kn-glass-bg-soft: rgba(255, 255, 255, 0.7);
    }
}