/* ==========================================================================
   Hello Kuppam — Design Tokens (v2)
   Single source of truth for color, type, spacing, radius, shadow and motion.
   Loaded BEFORE main.css. Every component below reads these custom
   properties rather than literal values — retheming happens here, once,
   not per component. See the "Legacy aliases" block: existing component
   rules across main.css already consume those names, so repointing them at
   the new primitives below uplifts the whole site immediately, ahead of
   each component's own rebuild.
   ========================================================================== */

:root {
    /* --- Color primitives ------------------------------------------------ */
    --hk-blue-50:  #EFF5FB;
    --hk-blue-100: #DCE8F6;
    --hk-blue-200: #B9D0EC;
    --hk-blue-300: #8CB2DE;
    --hk-blue-400: #4F86C6;
    --hk-blue-500: #1F63A6;
    --hk-blue-600: #0F4C81;
    --hk-blue-700: #0B3A63;
    --hk-blue-800: #082B4A;
    --hk-blue-900: #061D33;

    --hk-violet-400: #7C63E8;
    --hk-violet-500: #5B3DE0;
    --hk-violet-600: #4B2FC4;

    --hk-emerald-400: #2FC488;
    --hk-emerald-500: #0FA36B;
    --hk-emerald-600: #0C8657;

    --hk-gold-300: #F5C570;
    --hk-gold-400: #F0A93A;
    --hk-gold-600: #C4901F;

    --hk-red-400: #EA5F76;
    --hk-red-500: #E0426B;
    --hk-red-600: #DC3545;

    --hk-sky-400: #3EC1F3;

    --hk-gray-0:   #FFFFFF;
    --hk-gray-50:  #F7F8FB;
    --hk-gray-100: #EEF0F6;
    --hk-gray-200: #E2E5EF;
    --hk-gray-300: #CBD0DF;
    --hk-gray-400: #A6ABC0;
    --hk-gray-500: #7C8199;
    --hk-gray-600: #5B607A;
    --hk-gray-700: #3E4258;
    --hk-gray-800: #262A3D;
    --hk-gray-900: #14172A;
    --hk-gray-950: #0B0D16;

    /* Dark-mode surfaces — a near-black, faintly cool-toned scale (the
       Linear/Vercel approach) rather than a straight inversion of the light
       neutrals, which is what makes dark cards read as "elevated" instead
       of just "gray-on-gray". */
    --hk-dark-bg:          #0A0B10;
    --hk-dark-surface-1:   #12131B;
    --hk-dark-surface-2:   #191B26;
    --hk-dark-border:      rgba(255, 255, 255, .08);
    --hk-dark-border-strong: rgba(255, 255, 255, .14);
    --hk-dark-accent-blue: #5B9BE8;

    /* --- Typography --------------------------------------------------------
       One family for body and headings — weight and negative tracking carry
       the hierarchy instead of a second display face, the same discipline
       Stripe/Linear apply to keep dense UI and editorial copy in one voice. */
    --hk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hk-font-heading: var(--hk-font-sans);

    --hk-text-xs:   0.75rem;
    --hk-text-sm:   0.8125rem;
    --hk-text-base: 0.9375rem;
    --hk-text-md:   1.0625rem;
    --hk-text-lg:   1.25rem;
    --hk-text-xl:   clamp(1.25rem, 1.2rem + 0.3vw, 1.45rem);
    --hk-text-2xl:  clamp(1.3rem, 1.15rem + 0.6vw, 1.75rem);
    --hk-text-3xl:  clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
    --hk-text-4xl:  clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
    --hk-text-5xl:  clamp(1.75rem, 1.15rem + 2.4vw, 3.25rem);

    --hk-tracking-tightest: -0.03em;
    --hk-tracking-tighter:  -0.02em;
    --hk-tracking-tight:    -0.015em;
    --hk-tracking-normal:   -0.011em;
    --hk-tracking-wide:      0.04em;
    --hk-tracking-widest:    0.1em;

    --hk-leading-tight:  1.15;
    --hk-leading-snug:   1.35;
    --hk-leading-normal: 1.6;

    /* --- Spacing (8px grid) ------------------------------------------------- */
    --hk-space-1:  0.25rem;
    --hk-space-2:  0.5rem;
    --hk-space-3:  0.75rem;
    --hk-space-4:  1rem;
    --hk-space-5:  1.5rem;
    --hk-space-6:  2rem;
    --hk-space-8:  3rem;
    --hk-space-10: 4rem;
    --hk-space-12: 5rem;
    --hk-space-16: 6rem;
    --hk-space-20: 8rem;
    /* Fluid section rhythm — the "extreme breathing room" band (64px on
       small screens up to 128px on wide viewports) applied to every major
       marketing section as it gets rebuilt. */
    --hk-section-py: clamp(4rem, 3.2rem + 4vw, 8rem);

    /* --- Radius -------------------------------------------------------------- */
    --hk-radius-xs:   8px;
    --hk-radius-sm:   10px;
    --hk-radius-md:   14px;
    --hk-radius-lg:   18px;
    --hk-radius-xl:   24px;
    --hk-radius-2xl:  32px;
    --hk-radius-pill: 999px;

    /* --- Elevation ------------------------------------------------------------
       Every level stacks two shadows (a tight contact shadow + a soft, wide
       ambient one) instead of one hard drop shadow — the multi-layer look
       that reads as "floating" rather than "boxed". */
    --hk-elevation-1: 0 1px 2px rgba(11, 13, 30, .05), 0 1px 1px rgba(11, 13, 30, .03);
    --hk-elevation-2: 0 2px 8px rgba(11, 13, 30, .06), 0 1px 3px rgba(11, 13, 30, .04);
    --hk-elevation-3: 0 8px 24px rgba(11, 13, 30, .09), 0 2px 6px rgba(11, 13, 30, .05);
    --hk-elevation-4: 0 16px 40px rgba(11, 13, 30, .12), 0 4px 12px rgba(11, 13, 30, .06);
    --hk-elevation-5: 0 28px 68px rgba(11, 13, 30, .16), 0 8px 20px rgba(11, 13, 30, .08);
    --hk-elevation-glow-primary: 0 0 0 1px rgba(15, 76, 129, .10), 0 10px 28px rgba(15, 76, 129, .18);

    /* --- Motion ----------------------------------------------------------------
       Stripe's signature "ease-out-expo"-like curve for entrances; a
       symmetric curve for toggles/transitions that reverse. */
    --hk-ease-out:    cubic-bezier(.16, 1, .3, 1);
    --hk-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --hk-duration-fast: 150ms;
    --hk-duration-base: 250ms;
    --hk-duration-slow: 450ms;

    /* --- Z-index scale -------------------------------------------------------- */
    --hk-z-nav: 1050;
    --hk-z-drawer: 1060;
    --hk-z-dropdown: 1070;
    --hk-z-modal: 1080;

    /* =========================================================================
       Legacy aliases — main.css and every template already read *these* names
       (--hk-ink, --hk-surface, --hk-shadow-sm, --bs-primary…). Repointing them
       at the new primitives above re-themes color, elevation and radius across
       the whole app in one place. Component-owned rules get fully rebuilt
       module by module on top of this; never add a new literal color/shadow
       to component CSS — extend a primitive above instead.
       ========================================================================= */
    --bs-primary: var(--hk-blue-600);
    --bs-primary-rgb: 15, 76, 129;
    --bs-primary-bg-subtle: var(--hk-blue-50);
    --bs-primary-border-subtle: var(--hk-blue-200);
    --bs-primary-text-emphasis: var(--hk-blue-700);

    --bs-link-color: var(--hk-blue-600);
    --bs-link-color-rgb: 15, 76, 129;
    --bs-link-hover-color: var(--hk-blue-700);
    --bs-link-hover-color-rgb: 11, 58, 99;

    --bs-warning: var(--hk-gold-400);
    --bs-warning-rgb: 240, 169, 58;
    --bs-warning-bg-subtle: #FDF1DD;
    --bs-warning-border-subtle: #F8DBA3;

    --bs-focus-ring-color: rgba(15, 76, 129, .2);

    --hk-purple: var(--hk-violet-500);
    --hk-emerald: var(--hk-emerald-500);
    --hk-emerald-bg: #E4F7EF;
    --hk-sky: var(--hk-sky-400);
    --hk-gold: var(--hk-gold-400);

    --bs-body-font-family: var(--hk-font-sans);
    --bs-body-bg: var(--hk-gray-50);
    --bs-body-color: var(--hk-gray-700);

    --bs-border-radius-sm: var(--hk-radius-xs);
    --bs-border-radius: var(--hk-radius-sm);
    --bs-border-radius-lg: var(--hk-radius-md);
    --bs-border-radius-xl: var(--hk-radius-lg);
    --bs-border-radius-2xl: var(--hk-radius-xl);

    --hk-ink: var(--hk-gray-950);
    --hk-ink-soft: var(--hk-gray-500);
    --hk-border-soft: var(--hk-gray-200);
    --hk-surface: var(--hk-gray-0);
    --hk-radius-card: var(--hk-radius-lg);
    --hk-radius-pill: 999px;

    --hk-shadow-sm: var(--hk-elevation-2);
    --hk-shadow-md: var(--hk-elevation-3);
    --hk-shadow-hover: var(--hk-elevation-4);

    --hk-gradient: linear-gradient(135deg, var(--hk-blue-700) 0%, var(--hk-blue-600) 45%, var(--hk-violet-500) 100%);
    --hk-gradient-soft: linear-gradient(135deg, rgba(15, 76, 129, .08) 0%, rgba(91, 61, 224, .08) 100%);

    --hk-footer-bg: var(--hk-dark-bg);
    --hk-footer-border: rgba(255, 255, 255, .08);
}

/* --- Dark theme --------------------------------------------------------------
   Toggled by data-theme="dark" on <html> (see the navbar theme toggle +
   main.js). Only the semantic aliases are redefined — the primitive scales
   above stay constant; this is what makes the retheme a single, contained
   diff instead of a parallel copy of every component rule. ------------------- */
html[data-theme="dark"] {
    --bs-primary: var(--hk-dark-accent-blue);
    --bs-primary-rgb: 91, 155, 232;
    --bs-primary-bg-subtle: rgba(91, 155, 232, .16);
    --bs-primary-border-subtle: rgba(91, 155, 232, .32);
    --bs-primary-text-emphasis: #A9CCF3;

    --bs-link-color: var(--hk-dark-accent-blue);
    --bs-link-color-rgb: 91, 155, 232;
    --bs-link-hover-color: #8AB8EF;
    --bs-link-hover-color-rgb: 138, 184, 239;

    --bs-warning-bg-subtle: rgba(240, 169, 58, .16);
    --bs-warning-border-subtle: rgba(240, 169, 58, .32);

    --bs-body-bg: var(--hk-dark-bg);
    --bs-body-color: #D8DAEA;

    --hk-ink: #F4F5FA;
    --hk-ink-soft: #9BA0B4;
    --hk-border-soft: var(--hk-dark-border);
    --hk-surface: var(--hk-dark-surface-1);

    --hk-elevation-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 1px rgba(0, 0, 0, .3);
    --hk-elevation-2: 0 2px 10px rgba(0, 0, 0, .4);
    --hk-elevation-3: 0 10px 28px rgba(0, 0, 0, .5);
    --hk-elevation-4: 0 18px 44px rgba(0, 0, 0, .6);
    --hk-elevation-5: 0 30px 72px rgba(0, 0, 0, .65);

    --hk-shadow-sm: var(--hk-elevation-2);
    --hk-shadow-md: var(--hk-elevation-3);
    --hk-shadow-hover: var(--hk-elevation-4);

    --hk-gradient-soft: linear-gradient(135deg, rgba(91, 155, 232, .10) 0%, rgba(232, 178, 61, .10) 100%);

    --hk-footer-bg: #060709;
    --hk-footer-border: rgba(255, 255, 255, .06);
}