/* =====================================================================
   IB PLUS STATIONARY — theme.css
   DESIGN TOKENS ONLY.

   Every colour, radius, spacing step and font size in the storefront is
   driven from the custom properties below. To rebrand the whole site you
   only need to edit this file (or override the properties from the admin
   panel → Settings → Branding).

   Values are derived from the analysed reference design
   (see docs/DESIGN.md). Do not hardcode colours in component CSS —
   reference these variables instead.
   ===================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------- */
  /* Verified reference primary is near-black, NOT orange. Orange is the
     accent (rating stars / highlights) in the reference and is used a
     little more widely here to give IB PLUS STATIONARY its own identity. */
  --sh-primary:            #212121;
  --sh-primary-hover:      #0f0f0f;
  --sh-primary-soft:       #f4f4f5;
  --sh-on-primary:         #ffffff;

  --sh-accent:             #ff9c05;   /* rating stars, sale highlights  */
  --sh-accent-hover:       #e68c00;
  --sh-accent-dark:        #846300;   /* legible text on accent         */
  --sh-on-accent:          #212121;

  --sh-badge:              #3d405b;   /* discount + "New" badges        */
  --sh-on-badge:           #ffffff;

  --sh-success:            #397b21;
  --sh-success-soft:       #eef6ea;
  --sh-danger:             #dd3842;
  --sh-danger-soft:        #fdeced;
  --sh-warning:            #b7791f;
  --sh-warning-soft:       #fdf6e7;
  --sh-info:               #2563eb;
  --sh-info-soft:          #eff5ff;

  /* ---- Surfaces ---------------------------------------------------- */
  --sh-bg:                 #ffffff;
  --sh-bg-alt:             #f7f7f8;
  --sh-bg-muted:           #f1f5f6;
  --sh-bg-dark:            #212121;
  --sh-card-bg:            #ffffff;
  --sh-overlay:            rgba(0, 0, 0, .5);

  /* ---- Text -------------------------------------------------------- */
  --sh-text:               #1c1c1c;
  --sh-text-strong:        #000000;
  --sh-heading:            #000000;
  --sh-muted:              #6b7280;
  --sh-muted-light:        #9ca3af;
  --sh-link:               #212121;
  --sh-link-hover:         #ff9c05;

  /* ---- Lines ------------------------------------------------------- */
  --sh-border:             #e5e7eb;
  --sh-border-soft:        #ebebeb;   /* reference product-card border  */
  --sh-border-card:        #dedede;
  --sh-border-strong:      #cccccc;
  --sh-divider:            #f1f1f1;

  /* ---- Shape (verified from reference) ----------------------------- */
  --sh-radius-xs:          4px;
  --sh-radius-sm:          6px;
  --sh-radius:             8px;       /* --site-card-border-radius      */
  --sh-radius-lg:          12px;
  --sh-radius-xl:          15px;      /* --site-border-radius           */
  --sh-radius-pill:        999px;

  /* ---- Spacing scale ---------------------------------------------- */
  --sh-space-1:            4px;
  --sh-space-2:            8px;
  --sh-space-3:            12px;
  --sh-space-4:            16px;
  --sh-space-5:            24px;
  --sh-space-6:            32px;
  --sh-space-7:            48px;
  --sh-space-8:            64px;
  --sh-space-9:            96px;

  /* ---- Layout ------------------------------------------------------ */
  --sh-container:          1280px;
  --sh-container-narrow:   900px;
  --sh-gutter:             16px;
  --sh-header-height:      72px;
  --sh-nav-height:         48px;
  --sh-announce-height:    36px;

  /* ---- Typography (verified from reference) ------------------------ */
  --sh-font:               "Inter", "Instrument Sans", -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sh-font-size:          14px;      /* --font-size-primary            */
  --sh-font-size-sm:       13px;
  --sh-font-size-xs:       12px;
  --sh-font-size-lg:       16px;
  --sh-font-size-xl:       18px;
  --sh-line-height:        1.6;

  --sh-h1:                 34px;      /* --font-size-heading            */
  --sh-h2:                 30px;      /* --font-size-sub-heading        */
  --sh-h3:                 23.8px;    /* --font-size-heading-sm         */
  --sh-h4:                 21px;      /* --font-size-sub-heading-sm     */
  --sh-h5:                 18px;
  --sh-h6:                 16px;
  --sh-heading-weight:     500;       /* --font-weight-heading          */
  --sh-subheading-weight:  400;

  /* ---- Product card (verified from reference) ---------------------- */
  --sh-card-padding-v:     15px;      /* --product-card-padding-vertical   */
  --sh-card-padding-h:     8px;       /* --product-card-padding-horizontal */
  --sh-card-title-size:    13px;      /* --product-card-name-size-lg       */
  --sh-card-title-weight:  400;       /* --product-card-name-font-weight-lg*/
  --sh-card-image-ratio:   1 / 1;     /* --product-card-image-ratio        */
  --sh-card-image-fit:     contain;   /* --product-card-image-fit          */
  --sh-badge-size:         11px;      /* badge font-size                   */
  --sh-badge-weight:       600;       /* badge font-weight                 */
  --sh-badge-pad:          3px 10px;  /* badge padding                     */

  /* ---- Elevation --------------------------------------------------- */
  --sh-shadow-sm:          0 1px 2px rgba(0, 0, 0, .05);
  --sh-shadow:             0 2px 8px rgba(0, 0, 0, .06);
  --sh-shadow-md:          0 4px 16px rgba(0, 0, 0, .08);
  --sh-shadow-lg:          0 12px 32px rgba(0, 0, 0, .12);

  /* ---- Motion ------------------------------------------------------ */
  --sh-ease:               cubic-bezier(.4, 0, .2, 1);
  --sh-speed:              .2s;
  --sh-speed-slow:         .4s;

  /* ---- Z-index ----------------------------------------------------- */
  --sh-z-dropdown:         900;
  --sh-z-sticky:           1000;
  --sh-z-overlay:          1100;
  --sh-z-modal:            1200;
  --sh-z-toast:            1300;

  /* ---- Grid -------------------------------------------------------- */
  --sh-grid-products:      repeat(5, minmax(0, 1fr));
  --sh-grid-categories:    repeat(6, minmax(0, 1fr));
  --sh-grid-brands:        repeat(6, minmax(0, 1fr));
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --sh-grid-products:   repeat(3, minmax(0, 1fr));
    --sh-grid-categories: repeat(4, minmax(0, 1fr));
    --sh-grid-brands:     repeat(4, minmax(0, 1fr));
    --sh-h1: 28px;
    --sh-h2: 25px;
    --sh-h3: 21px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --sh-grid-products:   repeat(2, minmax(0, 1fr));
    --sh-grid-categories: repeat(3, minmax(0, 1fr));
    --sh-grid-brands:     repeat(3, minmax(0, 1fr));
    --sh-gutter: 12px;
    --sh-h1: 24px;
    --sh-h2: 21px;
    --sh-h3: 18px;
    --sh-h4: 17px;
    --sh-space-7: 32px;
    --sh-space-8: 40px;
    --sh-space-9: 56px;
    --sh-header-height: 60px;
  }
}

@media (max-width: 420px) {
  :root {
    --sh-grid-categories: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================================
   Self-hosted Inter (no external requests → works offline on XAMPP).
   Falls back to the system sans stack when the files are absent.
   ===================================================================== */
/* Inter (SIL Open Font License 1.1 — see assets/fonts/OFL.txt).
   Single variable font covers every weight used by the design system. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}