@charset "UTF-8";
/* ==========================================================================
   KAMJOO — Design Tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Nothing in the theme may hard-code a value that exists here.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand ------------------------------------------------------ */
  --kj-violet-50:  #F5F1FF;
  --kj-violet-100: #EDE4FF;
  --kj-violet-200: #DCC9FF;
  --kj-violet-300: #C4A3FF;
  --kj-violet-400: #A472FA;
  --kj-violet-500: #8B44F2;
  --kj-violet-600: #7A2BE2;   /* primary */
  --kj-violet-700: #661FC4;
  --kj-violet-800: #521A9E;
  --kj-violet-900: #3D1476;

  --kj-fuchsia-400: #E879F9;
  --kj-fuchsia-500: #D946EF;
  --kj-fuchsia-600: #C026D3;

  --kj-orange-400: #FFA23A;
  --kj-orange-500: #FF8A1F;
  --kj-orange-600: #F97008;   /* accent / CTA */

  --kj-rose-500: #FF3B6B;     /* sale */
  --kj-rose-600: #EE2255;

  --kj-mint-400: #2BD9A8;
  --kj-mint-500: #05C08B;     /* success / in-stock */
  --kj-mint-600: #00A376;

  --kj-amber-400: #FFC53D;    /* rating stars */
  --kj-sky-500:   #2BA8F2;    /* info */

  /* ---------- Semantic --------------------------------------------------- */
  --kj-primary:        var(--kj-violet-600);
  --kj-primary-hover:  var(--kj-violet-700);
  --kj-primary-soft:   var(--kj-violet-50);
  --kj-primary-ring:   rgba(122, 43, 226, .32);
  /* Filled controls paint -solid and write -on-primary, so a brand colour
     chosen in the hub can never put white text on a pale background. At the
     stock violet the two are simply the brand itself and white (4.99:1). */
  --kj-primary-solid:  var(--kj-violet-600);
  --kj-on-primary:     #fff;
  /* Brand text on light surfaces; the stock violet already clears 4.99:1. */
  --kj-primary-ink:    var(--kj-violet-600);

  --kj-accent:         var(--kj-orange-600);
  --kj-accent-hover:   #E06305;
  --kj-accent-soft:    #FFF3E6;

  --kj-sale:           var(--kj-rose-500);
  --kj-sale-soft:      #FFEDF2;
  --kj-success:        var(--kj-mint-500);
  --kj-success-soft:   #E4FBF4;

  /* Text-safe variants: the vivid colours above stay for fills/badges,
     these darker twins are used wherever the colour becomes small text
     so every label clears WCAG AA 4.5:1 on white. */
  --kj-sale-ink:       #D6194C;   /* 5.12:1 on #fff */
  --kj-accent-ink:     #B84F08;   /* 5.05:1 on #fff */
  --kj-success-ink:    #00815C;   /* 4.89:1 on #fff */

  /* Solid fills that carry WHITE text (buttons, count badges).
     The vivid --kj-accent stays for decorative fills with no text on top. */
  --kj-accent-solid:   #C2560A;   /* white on this = 4.54:1 */
  --kj-sale-solid:     #E11D53;   /* white on this = 4.66:1 */
  --kj-star:           var(--kj-amber-400);

  /* ---------- Neutrals --------------------------------------------------- */
  --kj-ink:      #12131A;   /* headings */
  --kj-body:     #3A3D4D;   /* body copy */
  --kj-muted:    #5F6478;   /* meta — AA on surface and surface-2 */
  --kj-faint:    #666C80;   /* placeholder/meta — AA on white (5.22) AND on
                               --kj-surface-2 (4.92); the previous #6E7488
                               passed only on pure white and failed at 4.38
                               once it sat on a tinted card. */
  --kj-line:     #E8EAF1;   /* borders */
  --kj-line-2:   #F1F2F7;   /* subtle dividers */
  --kj-surface:  #FFFFFF;
  --kj-surface-2:#F7F8FC;   /* page background */
  --kj-surface-3:#EFF1F8;   /* pressed / skeleton */

  /* ---------- Gradients -------------------------------------------------- */
  --kj-grad-brand:  linear-gradient(135deg, var(--kj-violet-600) 0%, var(--kj-fuchsia-600) 100%);
  --kj-grad-warm:   linear-gradient(135deg, var(--kj-orange-500) 0%, var(--kj-rose-500) 100%);
  --kj-grad-cool:   linear-gradient(135deg, var(--kj-violet-500) 0%, var(--kj-sky-500) 100%);
  --kj-grad-mint:   linear-gradient(135deg, var(--kj-mint-400) 0%, var(--kj-mint-600) 100%);
  --kj-grad-sheen:  linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);

  /* ---------- Typography ------------------------------------------------- */
  --kj-font: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;

  /* fluid scale — min at 360px viewport, max at 1440px */
  --kj-fs-2xs: clamp(.625rem, .60rem + .12vw, .6875rem);  /* 10 → 11 */
  --kj-fs-xs:  clamp(.6875rem, .65rem + .18vw, .75rem);   /* 11 → 12 */
  --kj-fs-sm:  clamp(.75rem, .71rem + .20vw, .8125rem);   /* 12 → 13 */
  --kj-fs-md:  clamp(.8125rem, .77rem + .22vw, .875rem);  /* 13 → 14 */
  --kj-fs-base:clamp(.875rem, .83rem + .22vw, .9375rem);  /* 14 → 15 */
  --kj-fs-lg:  clamp(.9375rem, .88rem + .28vw, 1.0625rem);/* 15 → 17 */
  --kj-fs-xl:  clamp(1.0625rem, .97rem + .42vw, 1.25rem); /* 17 → 20 */
  --kj-fs-2xl: clamp(1.25rem, 1.10rem + .66vw, 1.625rem); /* 20 → 26 */
  --kj-fs-3xl: clamp(1.5rem, 1.24rem + 1.14vw, 2.25rem);  /* 24 → 36 */
  --kj-fs-4xl: clamp(1.875rem, 1.42rem + 2.02vw, 3rem);   /* 30 → 48 */

  --kj-lh-tight: 1.25;
  --kj-lh-snug:  1.45;
  --kj-lh-base:  1.75;   /* Persian needs generous leading */
  --kj-lh-loose: 2;

  /* ---------- Space (4px base) ------------------------------------------- */
  --kj-s1:  .25rem;  --kj-s2: .5rem;   --kj-s3: .75rem;  --kj-s4: 1rem;
  --kj-s5:  1.25rem; --kj-s6: 1.5rem;  --kj-s7: 1.75rem; --kj-s8: 2rem;
  --kj-s10: 2.5rem;  --kj-s12: 3rem;   --kj-s14: 3.5rem; --kj-s16: 4rem;
  --kj-s20: 5rem;    --kj-s24: 6rem;

  --kj-gutter: clamp(.875rem, .55rem + 1.4vw, 1.5rem);
  --kj-section-y: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem);
  --kj-container: 1416px;

  /* ---------- Radius ----------------------------------------------------- */
  --kj-r-xs: 6px;  --kj-r-sm: 10px; --kj-r-md: 14px; --kj-r-lg: 18px;
  --kj-r-xl: 24px; --kj-r-2xl: 32px; --kj-r-pill: 999px;

  /* ---------- Shadows ---------------------------------------------------- */
  --kj-sh-xs: 0 1px 2px rgba(18,19,26,.05);
  --kj-sh-sm: 0 2px 8px rgba(18,19,26,.06);
  --kj-sh-md: 0 6px 20px rgba(18,19,26,.08);
  --kj-sh-lg: 0 14px 38px rgba(18,19,26,.10);
  --kj-sh-xl: 0 24px 60px rgba(18,19,26,.14);
  --kj-sh-brand: 0 10px 30px rgba(122,43,226,.28);
  --kj-sh-accent:0 10px 26px rgba(249,112,8,.30);
  --kj-sh-inset: inset 0 0 0 1px var(--kj-line);

  /* ---------- Motion ----------------------------------------------------- */
  --kj-ease:       cubic-bezier(.4, 0, .2, 1);
  --kj-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --kj-ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --kj-t-fast: .16s; --kj-t-base: .26s; --kj-t-slow: .42s;

  /* ---------- Layers ----------------------------------------------------- */
  --kj-z-base: 1;     --kj-z-sticky: 100; --kj-z-header: 200;
  --kj-z-drawer: 300; --kj-z-modal: 400;  --kj-z-toast: 500;

  /* ---------- Component sizing ------------------------------------------- */
  --kj-header-h: 74px;
  --kj-nav-h: 52px;
  --kj-mobilebar-h: 62px;
  --kj-tap: 44px;              /* WCAG 2.5.8 minimum target */
}

/* Respect user motion preference — global kill-switch */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}