/* ==========================================================================
   Joi+Blokes — design tokens
   --------------------------------------------------------------------------
   Colour values come from the Figma variables on the LP1 frame (29:181).
   Where a Figma variable matches an existing custom property in the live
   theme (assets/css/main.css), the theme's name is noted so the two systems
   can be reconciled later.

   Everything downstream reads these tokens. Change a brand value here, not
   in the component files.
   ========================================================================== */

:root {
  /* ---- Brand palette (Figma variables, LP1) -------------------------- */
  --jb-cream:        #fafcf2;  /* Figma "Cream"             — secondary button, light surfaces */
  --jb-white:        #ffffff;  /* Figma "White"             — card surfaces */
  --jb-page-bg:      #dfdfdf;  /* Figma "Background-color"  — page background */
  --jb-card-bg:      #e8e8e9;  /* Figma "card-bg"           — inset panels */
  --jb-button:       #363636;  /* Figma "button-color"      — theme --color-dark-gray */
  --jb-ink:          #262626;  /* Figma "Black"             — headings, body */
  --jb-ink-deep:     #1c1d16;  /* Figma "Dark Green-Black"  — dark section bg */
  --jb-text-muted:   #727272;  /* Figma "font-color"        — supporting copy */
  --jb-gray-1:       #949494;  /* Figma "Gray-1"            — theme --color-gray-switch */
  --jb-accent-blue:  #cdd9f9;  /* Figma "Light-Blue"        — theme --color-light-purple */
  --jb-hairline:     rgba(0, 0, 0, 0.16); /* Figma "border-2" (#00000029) */

  /* Derived surface + text roles ---------------------------------------- */
  --jb-on-dark:            var(--jb-cream);
  --jb-on-dark-muted:      rgba(250, 252, 242, 0.72);
  --jb-overlay-panel:      rgba(28, 29, 22, 0.58); /* hero photo scrim */
  --jb-overlay-panel-edge: rgba(28, 29, 22, 0);
  --jb-badge-glass:        rgba(255, 255, 255, 0.16);

  /* ---- Typography ----------------------------------------------------- */
  --jb-font-sans:  "Basis Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jb-font-serif: "Simula", Georgia, "Times New Roman", serif;

  /* Type scale. Fluid between the two Figma breakpoints (430px / 1440px). */
  --jb-fs-display: clamp(1.75rem, 1.3rem + 1.57vw, 2.5rem);     /*  28 → 40 */
  --jb-fs-h2:      clamp(1.5rem, 1.16rem + 1.19vw, 2.25rem);    /*  24 → 36 */
  --jb-fs-h3:      clamp(1.125rem, 1.04rem + 0.3vw, 1.25rem);   /*  18 → 20 */
  --jb-fs-h4:      1rem;                                        /*  16 */
  --jb-fs-body:    1rem;                                        /*  16 */
  --jb-fs-small:   0.875rem;                                    /*  14 */
  --jb-fs-xs:      0.8125rem;                                   /*  13 — button labels */
  --jb-fs-eyebrow: 0.6875rem;                                   /*  11 — pills, labels */

  --jb-lh-tight:   1.15;
  --jb-lh-heading: 1.25;
  --jb-lh-body:    1.55;

  --jb-fw-light:   300;
  --jb-fw-regular: 400;
  --jb-fw-medium:  500;
  --jb-fw-bold:    700;

  --jb-tracking-eyebrow: 0.09em;
  --jb-tracking-tight:   -0.01em;

  /* ---- Layout --------------------------------------------------------- */
  /* The Figma 1440 frame insets its main content by 174px each side,
     leaving a 1092px content column. The FAQ band uses a wider 1312px
     column (64px inset), exposed separately as --jb-container-wide. */
  --jb-container:       1092px;
  --jb-container-wide:  1312px;
  --jb-container-narrow: 664px; /* S5 intro; S3 uses 644 via lp1.css */
  --jb-gutter:          24px;
  --jb-gutter-mobile:   24px;   /* 430 - 48 = 382, matching the mobile frame */

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --jb-space-1:  0.25rem;  /*  4 */
  --jb-space-2:  0.5rem;   /*  8 */
  --jb-space-3:  0.75rem;  /* 12 */
  --jb-space-4:  1rem;     /* 16 */
  --jb-space-5:  1.25rem;  /* 20 */
  --jb-space-6:  1.5rem;   /* 24 */
  --jb-space-8:  2rem;     /* 32 */
  --jb-space-10: 2.5rem;   /* 40 */
  --jb-space-12: 3rem;     /* 48 */
  --jb-space-16: 4rem;     /* 64 */
  --jb-space-20: 5rem;     /* 80 */

  /* Vertical rhythm for a full-width band. Figma bands sit at 64px top
     padding on desktop; mobile compresses to 40px. */
  --jb-band-y: clamp(2.5rem, 1.6rem + 3.1vw, 4rem);             /*  40 → 64 */

  /* ---- Radii ---------------------------------------------------------- */
  --jb-radius-sm:   8px;
  --jb-radius-md:   16px;
  --jb-radius-lg:   24px;
  --jb-radius-card: 24px;
  --jb-radius-pill: 100px;

  /* ---- Elevation ------------------------------------------------------ */
  --jb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --jb-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10);

  /* ---- Controls ------------------------------------------------------- */
  --jb-control-h:      46px;  /* text inputs (Figma S4) */
  --jb-button-h:       61px;  /* primary CTA (Figma S4/S2) */
  --jb-button-h-small: 48px;

  /* ---- Motion --------------------------------------------------------- */
  --jb-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --jb-duration:   240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --jb-duration: 1ms; }
}