/* =========================================================================
   FashionKart v2 — Design Tokens (Premium Minimal)
   Single source of truth for color, type, spacing, motion, radius, shadow.
   Applied site-wide: storefront, seller, admin, auth.
   ========================================================================= */

:root,
.fkv2 {
    /* ---------- Color: Brand ---------- */
    --fk-onyx:        #0F0F12;
    --fk-onyx-700:    #1F2024;
    --fk-onyx-500:    #3A3B40;
    --fk-onyx-300:    #6B6C73;
    --fk-onyx-200:    #9A9BA1;
    --fk-onyx-100:    #C7C8CD;

    --fk-ivory:       #FAF7F2;
    --fk-ivory-50:    #FFFDF9;
    --fk-cream:       #F2EEE6;
    --fk-stone:       #E5E1D8;
    --fk-stone-soft:  #EDE9E0;

    --fk-gold:        #B8945F;
    --fk-gold-700:    #957449;
    --fk-gold-100:    #F1E8D7;

    --fk-sale:        #C73E3A;
    --fk-sale-700:    #A22F2C;
    --fk-sale-100:    #FBEBEA;

    --fk-success:     #2F7D5B;
    --fk-success-100: #E4F1EA;
    --fk-warning:     #C68B17;
    --fk-warning-100: #FBF1DC;
    --fk-info:        #2D5BA5;
    --fk-info-100:    #E2EAF5;

    /* ---------- Color: Surface ---------- */
    --fk-bg:          var(--fk-ivory);
    --fk-bg-alt:      var(--fk-ivory-50);
    --fk-surface:     #FFFFFF;
    --fk-surface-alt: var(--fk-cream);
    --fk-text:        var(--fk-onyx-700);
    --fk-text-muted:  var(--fk-onyx-300);
    --fk-text-soft:   var(--fk-onyx-200);
    --fk-text-invert: var(--fk-ivory);
    --fk-border:      var(--fk-stone);
    --fk-border-soft: var(--fk-stone-soft);
    --fk-overlay:     rgba(15, 15, 18, 0.45);

    /* ---------- Type ---------- */
    --fk-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --fk-font-body:    'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fk-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    --fk-fs-xs:    11px;
    --fk-fs-sm:    13px;
    --fk-fs-base:  14px;
    --fk-fs-md:    16px;
    --fk-fs-lg:    18px;
    --fk-fs-xl:    22px;
    --fk-fs-2xl:   28px;
    --fk-fs-3xl:   36px;
    --fk-fs-4xl:   48px;
    --fk-fs-5xl:   64px;
    --fk-fs-hero:  88px;

    --fk-lh-tight: 1.1;
    --fk-lh-snug:  1.25;
    --fk-lh-base:  1.5;
    --fk-lh-loose: 1.75;

    --fk-tracking-tight: -0.02em;
    --fk-tracking-snug:  -0.01em;
    --fk-tracking-wide:  0.04em;
    --fk-tracking-wider: 0.12em;

    /* ---------- Spacing (4-pt) ---------- */
    --fk-sp-0:  0;
    --fk-sp-1:  4px;
    --fk-sp-2:  8px;
    --fk-sp-3:  12px;
    --fk-sp-4:  16px;
    --fk-sp-5:  20px;
    --fk-sp-6:  24px;
    --fk-sp-8:  32px;
    --fk-sp-10: 40px;
    --fk-sp-12: 48px;
    --fk-sp-16: 64px;
    --fk-sp-20: 80px;
    --fk-sp-24: 96px;
    --fk-sp-32: 128px;

    /* ---------- Radius ---------- */
    --fk-radius-xs:   2px;
    --fk-radius-sm:   4px;
    --fk-radius-md:   8px;
    --fk-radius-lg:   12px;
    --fk-radius-xl:   16px;
    --fk-radius-2xl:  24px;
    --fk-radius-pill: 999px;

    /* ---------- Shadow / Elevation ---------- */
    --fk-shadow-xs: 0 1px 2px rgba(15, 15, 18, 0.06);
    --fk-shadow-sm: 0 2px 4px rgba(15, 15, 18, 0.06), 0 1px 2px rgba(15, 15, 18, 0.04);
    --fk-shadow-md: 0 6px 16px rgba(15, 15, 18, 0.08), 0 2px 4px rgba(15, 15, 18, 0.04);
    --fk-shadow-lg: 0 18px 40px rgba(15, 15, 18, 0.12), 0 4px 8px rgba(15, 15, 18, 0.06);
    --fk-shadow-xl: 0 32px 64px rgba(15, 15, 18, 0.18);
    --fk-shadow-inset: inset 0 0 0 1px var(--fk-border);
    --fk-shadow-focus: 0 0 0 3px rgba(184, 148, 95, 0.25);

    /* ---------- Motion ---------- */
    --fk-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --fk-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --fk-ease-in:     cubic-bezier(0.55, 0, 0.85, 0);
    --fk-dur-fast:    140ms;
    --fk-dur:         220ms;
    --fk-dur-slow:    340ms;
    --fk-dur-slower:  520ms;

    /* ---------- Layout ---------- */
    --fk-container:    1320px;
    --fk-container-sm: 720px;
    --fk-container-md: 960px;
    --fk-container-lg: 1140px;
    --fk-gutter:       24px;
    --fk-gutter-sm:    16px;

    --fk-header-h-top:   36px;   /* announcement bar */
    --fk-header-h-main:  72px;   /* logo + search */
    --fk-header-h-nav:   48px;   /* meganav */
    --fk-header-h-mob:   60px;
    --fk-bottom-nav-h:   62px;

    /* ---------- Z-index ---------- */
    --fk-z-drop:    100;
    --fk-z-sticky:  200;
    --fk-z-header:  900;
    --fk-z-modal-bg:1000;
    --fk-z-modal:   1010;
    --fk-z-toast:   1100;
    --fk-z-top:     1200;

    /* ---------- AIZ / legacy bridge ----------
       Keep these so existing aiz-core.css utility classes (`.text-primary`, `.btn-primary`,
       `.bg-primary`, `var(--primary)`) automatically pick up the new palette.
       Existing pages that use the old vars will look correct without rewrites. */
    --primary:               var(--fk-onyx);
    --hov-primary:            #000000;
    --soft-primary:           rgba(15, 15, 18, 0.08);
    --secondary-base:         var(--fk-gold);
    --hov-secondary-base:     var(--fk-gold-700);
    --soft-secondary-base:    rgba(184, 148, 95, 0.15);
    --blue:                   var(--fk-info);
    --hov-blue:               #1f4986;
    --soft-blue:              rgba(45, 91, 165, 0.12);
    --secondary:              var(--fk-onyx-300);
    --soft-secondary:         rgba(107, 108, 115, 0.12);
    --success:                var(--fk-success);
    --soft-success:           var(--fk-success-100);
    --warning:                var(--fk-warning);
    --soft-warning:           var(--fk-warning-100);
    --info:                   var(--fk-info);
    --soft-info:              var(--fk-info-100);
    --danger:                 var(--fk-sale);
    --soft-danger:            var(--fk-sale-100);
    --dark:                   var(--fk-onyx);
    --soft-dark:              var(--fk-onyx-700);
    --gray:                   var(--fk-onyx-300);
    --gray-dark:              var(--fk-onyx-500);
    --light:                  var(--fk-stone-soft);
    --soft-light:             var(--fk-border);
    --soft-white:             var(--fk-onyx-100);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    :root, .fkv2 {
        --fk-dur-fast: 0ms;
        --fk-dur: 0ms;
        --fk-dur-slow: 0ms;
        --fk-dur-slower: 0ms;
    }
}

/* ---------- Body baseline ---------- */
body.fkv2,
.fkv2 body,
body[data-fkv2="1"] {
    font-family: var(--fk-font-body);
    font-size: var(--fk-fs-base);
    line-height: var(--fk-lh-base);
    color: var(--fk-text);
    background: var(--fk-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Typography utilities ---------- */
.fk-display { font-family: var(--fk-font-display); font-weight: 600; letter-spacing: var(--fk-tracking-tight); line-height: var(--fk-lh-tight); }
.fk-display-italic { font-family: var(--fk-font-display); font-style: italic; font-weight: 500; }
.fk-eyebrow { font-family: var(--fk-font-body); font-size: var(--fk-fs-xs); letter-spacing: var(--fk-tracking-wider); text-transform: uppercase; font-weight: 600; color: var(--fk-text-muted); }
.fk-lead { font-size: var(--fk-fs-md); line-height: var(--fk-lh-loose); color: var(--fk-text-muted); }

.fk-h1 { font: 700 var(--fk-fs-5xl)/var(--fk-lh-tight) var(--fk-font-display); letter-spacing: var(--fk-tracking-tight); margin: 0; }
.fk-h2 { font: 600 var(--fk-fs-4xl)/var(--fk-lh-tight) var(--fk-font-display); letter-spacing: var(--fk-tracking-tight); margin: 0; }
.fk-h3 { font: 600 var(--fk-fs-3xl)/var(--fk-lh-snug) var(--fk-font-display); letter-spacing: var(--fk-tracking-snug); margin: 0; }
.fk-h4 { font: 600 var(--fk-fs-2xl)/var(--fk-lh-snug) var(--fk-font-display); margin: 0; }
.fk-h5 { font: 600 var(--fk-fs-xl)/var(--fk-lh-snug) var(--fk-font-body); margin: 0; }
.fk-h6 { font: 600 var(--fk-fs-lg)/var(--fk-lh-snug) var(--fk-font-body); margin: 0; }

@media (max-width: 991.98px) {
    .fk-h1 { font-size: var(--fk-fs-3xl); }
    .fk-h2 { font-size: var(--fk-fs-2xl); }
    .fk-h3 { font-size: var(--fk-fs-xl); }
    .fk-h4 { font-size: var(--fk-fs-lg); }
}

/* ---------- Container ---------- */
.fk-container {
    width: 100%;
    max-width: var(--fk-container);
    margin: 0 auto;
    padding-left: var(--fk-gutter);
    padding-right: var(--fk-gutter);
}
.fk-container-sm { max-width: var(--fk-container-sm); margin: 0 auto; padding-left: var(--fk-gutter); padding-right: var(--fk-gutter); }
.fk-container-md { max-width: var(--fk-container-md); margin: 0 auto; padding-left: var(--fk-gutter); padding-right: var(--fk-gutter); }
.fk-container-lg { max-width: var(--fk-container-lg); margin: 0 auto; padding-left: var(--fk-gutter); padding-right: var(--fk-gutter); }

@media (max-width: 575.98px) {
    .fk-container, .fk-container-sm, .fk-container-md, .fk-container-lg {
        padding-left: var(--fk-gutter-sm);
        padding-right: var(--fk-gutter-sm);
    }
}

/* ---------- Section spacing ---------- */
.fk-section      { padding: var(--fk-sp-16) 0; }
.fk-section-sm   { padding: var(--fk-sp-10) 0; }
.fk-section-lg   { padding: var(--fk-sp-24) 0; }

@media (max-width: 767.98px) {
    .fk-section    { padding: var(--fk-sp-10) 0; }
    .fk-section-sm { padding: var(--fk-sp-6) 0; }
    .fk-section-lg { padding: var(--fk-sp-16) 0; }
}

/* ---------- Visually hidden ---------- */
.fk-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}