/* ==========================================================================
   JandJRoo — Design tokens
   Single source of truth for colour, type, spacing and elevation.
   ========================================================================== */

:root {
  /* --- Brand / neutrals -------------------------------------------------
     --c-ink is the primary brand colour (buttons, primary actions).
     --c-btn-text is derived from it at runtime in inc/dynamic-css.php so a
     light brand colour never produces invisible button labels. Likewise
     --c-primary-text / --c-secondary-text are darkened until legible on the
     page background — brand colours are picked for logos, not for 15px copy.
     ---------------------------------------------------------------------- */
  --c-black:        #000000;
  --c-ink:          #55b2e7;   /* primary button + strong UI */
  --c-ink-hover:    #3a9bd4;
  --c-ink-light:    #7cc4ee;
  --c-btn-text:     #000000;   /* recomputed from --c-ink */
  --c-btn-bg:       #55b2e7;   /* recomputed so --c-btn-text passes on it */
  --c-btn-bg-hover: #3a9bd4;

  --c-primary-text: #1a72a8;   /* brand blue, legible as text */
  --c-primary-soft: #eef7fd;
  /* Deep brand tone for dark bands (hero, CTA, dark split). Derived from the
     primary so it stays on-brand, but dark enough for white text. */
  --c-dark:         #204458;
  --c-on-dark:      #ffffff;

  --c-secondary:      #e8952d; /* accent */
  --c-secondary-text: #9a5b15;  /* AA on white and the grey sections */
  --c-secondary-soft: #fdf4e9;
  --c-on-secondary:   #000000;
  --c-body:         #5a5a5a;   /* default body copy */
  --c-muted:        #6a6a6a;   /* AA on white, footer and specs backgrounds */
  --c-faint:        #6a6a6a;
  --c-disabled:     #c4c4c4;

  --c-white:        #ffffff;
  --c-bg:           #ffffff;
  --c-bg-dim:       #f2f2f2;
  --c-bg-alt:       #f1f1f1;
  --c-bg-specs:     #f8f8f8;
  --c-border:       #e2e2e2;
  --c-border-soft:  #eeeeee;

  /* --- Semantic --------------------------------------------------------- */
  --c-price:        #1a72a8;   /* darkened brand blue, legible on white */
  --c-was-price:    #6a6a6a;
  --c-sale:         #9a5b15;   /* darkened brand orange, AA on grey too */
  --c-success:      #56ad6a;
  --c-star:         #f6a723;   /* review stars */

  /* Badge fills — darkened so white labels stay legible. */
  --c-badge-primary: #1a72a8;
  --c-badge-sale:    #9a5b15;
  --c-badge-clearance: #b42318;
  --c-link:         #5a5a5a;
  --c-link-hover:   #000000;

  /* --- Surfaces --------------------------------------------------------- */
  --c-topbar:       #000000;
  --c-topbar-text:  #ffffff;
  --c-nav:          #ffffff;
  --c-nav-text:     #000000;
  --c-footer:       #f1f1f1;
  --c-footer-text:  #000000;
  --c-footer-btm:   #ffffff;

  /* --- Type ------------------------------------------------------------- */
  --font-body: "Avenir Next LT Pro", "Avenir Next", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Avenir Next LT Pro", "Avenir Next", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, monospace;

  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    26px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --ls-wide:   .08em;   /* overlines / eyebrows */
  --ls-wider:  .14em;   /* section kickers */

  /* --- Layout ----------------------------------------------------------- */
  --container:      1500px;
  --container-mid:  1200px;
  --container-narrow: 750px;
  --page-pad:       40px;
  --gutter:         22px;
  --section-pad:    60px;
  --section-head-mb: 40px;

  /* --- Shape / motion --------------------------------------------------- */
  --radius-sm:  2px;
  --radius:     4px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow:    0 2px 8px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .12);

  --ease: cubic-bezier(.25, .46, .45, .94);
  --dur:  .22s;

  /* --- Z-index scale ---------------------------------------------------- */
  --z-nav:      100;
  --z-mega:     200;
  --z-header:   300;
  --z-drawer:   400;
  --z-overlay:  390;
  --z-modal:    500;
}

@media (max-width: 1023px) {
  :root {
    --page-pad:        17px;
    --gutter:          16px;
    --section-pad:     40px;
    --section-head-mb: 25px;

    --fs-3xl: 30px;
    --fs-4xl: 36px;
  }
}