/* ==========================================================================
   JammJar design tokens
   --------------------------------------------------------------------------
   Everything visual is derived from this file. To re-skin the whole site,
   change the values in the BRAND block below and nothing else.

   NOTE FOR JAMES: the three values marked [CHECK] are best-guess matches to
   jammjar.com. Open jammjar.com, inspect the primary button and the dark
   section background, and paste the exact hex values in. Nothing else needs
   to change.
   ========================================================================== */

:root {
  /* ---- BRAND ---------------------------------------------------------- */
  --jj-ink:        #262626;  /* near-black: body text, dark UI. Confirmed.    */
  --jj-obsidian:   #0B0A09;  /* [CHECK] dark section background               */
  /* ---- BRAND GREEN -----------------------------------------------------
     One accent, three jobs. Picking the wrong one is the easiest way to make
     the site unreadable, so:

       --jj-green       #17F067  FILLS and text on DARK backgrounds only.
                                 As text on white it is 1.5:1. Never do that.
       --jj-green-text  #087831  TEXT, icons and borders on LIGHT backgrounds.
                                 Same hue, 5.6:1 on white, 5.1:1 on off-white.
       --jj-on-green    #262626  The label colour for anything filled with
                                 --jj-green. Ink, not white: 9.9:1 vs 1.5:1.
     -------------------------------------------------------------------- */
  --jj-green:      #17F067;
  --jj-green-dark: #12C853;
  --jj-green-text: #087831;
  --jj-green-soft: rgba(23, 240, 103, 0.12);
  --jj-on-green:   #262626;

  /* ---- NEUTRALS ------------------------------------------------------- */
  --jj-white:      #FFFFFF;
  --jj-offwhite:   #F6F4F1;
  --jj-sand:       #EDE9E3;
  --jj-line:       #E2DDD6;
  --jj-line-dark:  rgba(255, 255, 255, 0.14);
  --jj-grey:       #6F6862;
  --jj-grey-dark:  rgba(255, 255, 255, 0.62);

  /* ---- TYPE ----------------------------------------------------------- */
  /* Neue Plak is the licensed brand face. Drop the woff2 files into
     assets/fonts/ and uncomment the @font-face block in fonts.css and it will
     take over automatically. Instrument Sans is the fallback until then. */
  --jj-font-display: "Neue Plak", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --jj-font-body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --jj-font-num:     "Instrument Sans", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- SCALE ---------------------------------------------------------- */
  --jj-step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --jj-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --jj-step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem);
  --jj-step-2:  clamp(1.55rem, 1.35rem + 0.95vw, 2.10rem);
  --jj-step-3:  clamp(2.10rem, 1.70rem + 1.95vw, 3.20rem);
  --jj-step-4:  clamp(2.90rem, 2.05rem + 4.10vw, 5.40rem);
  --jj-step-5:  clamp(3.60rem, 2.20rem + 6.60vw, 7.50rem);

  /* ---- SPACE ---------------------------------------------------------- */
  --jj-gutter:  clamp(20px, 5vw, 56px);
  --jj-band-y:  clamp(64px, 9vw, 128px);
  --jj-max:     1180px;

  /* ---- SHAPE ---------------------------------------------------------- */
  --jj-radius:    14px;
  --jj-radius-lg: 22px;
  --jj-radius-pill: 999px;

  --jj-shadow:    0 1px 2px rgba(20, 17, 15, 0.05), 0 8px 24px rgba(20, 17, 15, 0.06);
  --jj-shadow-lg: 0 2px 4px rgba(20, 17, 15, 0.06), 0 24px 60px rgba(20, 17, 15, 0.12);

  --jj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}