/* ==========================================================================
   K2H THEME · DESIGN TOKENS
   --------------------------------------------------------------------------
   Every colour, font, size and motion value used by the theme lives here.
   Change a token once and the whole site follows.
   Naming: --k2h-{group}-{shade|role}
   ========================================================================== */

:root {
    /* ---- Brand palette -------------------------------------------------- */
    --k2h-navy-950: #050D1A;
    --k2h-navy-900: #06101F;
    --k2h-navy-800: #0A1A30;   /* primary dark ground */
    --k2h-navy-700: #0F2440;
    --k2h-navy-600: #16335C;
    --k2h-navy-500: #1F4373;

    --k2h-gold-200: #F3E2B8;
    --k2h-gold-300: #E8CF94;   /* gold on dark */
    --k2h-gold-400: #D8B878;
    --k2h-gold-500: #C9A35E;   /* lines, ornaments */
    --k2h-gold-600: #B8904F;
    --k2h-gold-700: #7A5C26;   /* gold text on cream (AA) */

    --k2h-cream-50:  #FFFDF8;
    --k2h-cream-100: #F7F0E3;  /* primary light ground */
    --k2h-cream-200: #EFE5D1;
    --k2h-cream-300: #E6D9BF;

    /* ---- Festive palette ------------------------------------------------ */
    --k2h-crimson-400: #B3192F;
    --k2h-crimson-500: #8A1A2C;
    --k2h-crimson-600: #6E1220;
    --k2h-crimson-800: #3E0A12;
    --k2h-pine-500:    #1F5A42;
    --k2h-pine-600:    #17473A;

    /* ---- Text ----------------------------------------------------------- */
    --k2h-ink:         #1B2333;
    --k2h-ink-soft:    #3C4658;
    --k2h-ink-muted:   #4A5468;
    --k2h-on-dark:     #F7F0E3;
    --k2h-on-dark-soft:#C9D1DE;
    --k2h-on-festive:  #F1E3D3;

    /* ---- Gradients ------------------------------------------------------ */
    --k2h-gold-gradient:    linear-gradient(135deg, var(--k2h-gold-600) 0%, var(--k2h-gold-300) 50%, var(--k2h-gold-600) 100%);
    --k2h-night-gradient:   radial-gradient(120% 90% at 75% 35%, var(--k2h-navy-600) 0%, var(--k2h-navy-800) 60%);
    --k2h-crimson-gradient: radial-gradient(90% 120% at 20% 0%, var(--k2h-crimson-500) 0%, #5A0E19 55%, var(--k2h-crimson-800) 100%);

    /* ---- Typography ----------------------------------------------------- */
    --k2h-font-display: "Cormorant Garamond", "Times New Roman", serif;
    --k2h-font-label:   "Cinzel", "Cinzel Regular", serif;
    --k2h-font-body:    "Jost", "Noto Sans", system-ui, sans-serif;

    --k2h-text-xs:   0.75rem;
    --k2h-text-sm:   0.875rem;
    --k2h-text-base: 1rem;
    --k2h-text-lg:   1.125rem;
    --k2h-text-xl:   clamp(1.125rem, 1rem + .4vw, 1.3rem);
    --k2h-h3:        clamp(1.35rem, 1.2rem + .5vw, 1.6rem);
    --k2h-h2:        clamp(2.4rem, 1.6rem + 3vw, 4rem);
    --k2h-h1:        clamp(2.75rem, 1.6rem + 4.6vw, 5.4rem);

    --k2h-tracking-label: .26em;

    /* ---- Space & layout ------------------------------------------------- */
    --k2h-gutter:        clamp(16px, 4vw, 40px);
    --k2h-section-y:     clamp(64px, 9vw, 120px);
    --k2h-container:     1320px;
    --k2h-header-h:      84px;

    /* ---- Shape ---------------------------------------------------------- */
    --k2h-arch:       999px 999px 8px 8px;   /* palace-window arch */
    --k2h-arch-soft:  50% 50% 8px 8px / 26% 26% 8px 8px;
    --k2h-radius:     4px;

    /* ---- Elevation ------------------------------------------------------ */
    --k2h-shadow-sm:   0 8px 20px -12px rgba(10, 26, 48, .35);
    --k2h-shadow-md:   0 24px 50px -28px rgba(10, 26, 48, .55);
    --k2h-shadow-lg:   0 40px 80px -30px rgba(0, 0, 0, .65);
    --k2h-glow-gold:   0 12px 30px -10px rgba(232, 207, 148, .6);

    /* ---- Motion --------------------------------------------------------- */
    --k2h-ease:       cubic-bezier(.2, .8, .2, 1);
    --k2h-dur-fast:   .2s;
    --k2h-dur:        .4s;
    --k2h-dur-slow:   .9s;

    /* ---- Layers --------------------------------------------------------- */
    --k2h-z-snow:      900;
    --k2h-z-header:    997;     /* matches original #header */
    --k2h-z-actionbar: 995;
    --k2h-z-preloader: 10000;
    --k2h-z-popup:     10050;   /* native <dialog> renders in the top layer anyway */
}
