/* ════════════════════════════════════════════════════════════════════
   JSA Generator design tokens.

   Extracted from the SiteCani design system (the sitecani.com homepage
   "light redesign" :root block, its header stylesheet and its footer
   partial), values copied verbatim, not approximated. One deliberate
   departure, decided at plan approval: ONE accent. SiteCani itself
   drifts between orange (#FD6503, homepage), blue (#007BFF, header CTA)
   and blue (#2563eb, featured pricing card); here orange is the accent
   everywhere, including the nav CTA and the featured pricing card.

   Nothing in this file renders anything. Pages opt in by linking
   site.css, which consumes these.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* ── palette ── */
    --jsa-navy: #051528;          /* headings, dark closing band        */
    --jsa-slate: #2F3C4D;         /* body text                          */
    --jsa-steel: #4A637A;         /* secondary text, eyebrows           */
    --jsa-orange: #FD6503;        /* the accent                         */
    --jsa-orange-dark: #E05800;   /* accent hover                       */
    --jsa-white: #FFFFFF;
    --jsa-bg: #F7F9FB;            /* page background                    */
    --jsa-band: #E8EDF2;          /* alternating section bands          */
    --jsa-border: #E5E7EB;        /* card and nav borders               */
    --jsa-footer-navy: #1e3a5f;   /* footer background                  */

    /* ── type ── */
    --jsa-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --jsa-size-h1: clamp(2.5rem, 5.6vw, 4.6rem);
    --jsa-size-h2: clamp(1.8rem, 3.2vw, 2.5rem);
    --jsa-size-sub: clamp(1.05rem, 1.6vw, 1.25rem);
    --jsa-size-body: 1.05rem;
    --jsa-size-card-title: 1.05rem;
    --jsa-size-card-body: 0.92rem;
    --jsa-size-eyebrow: 0.78rem;

    /* ── radii ── */
    --jsa-radius-btn: 8px;
    --jsa-radius-card: 12px;
    --jsa-radius-stage: 14px;     /* product-mockup frames              */
    --jsa-radius-plan: 16px;      /* pricing cards                      */
    --jsa-radius-pill: 999px;

    /* ── shadows ── */
    --jsa-shadow-header: 0 2px 10px rgba(0, 0, 0, 0.08);
    --jsa-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
    --jsa-shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.1);
    --jsa-shadow-stage: 0 26px 60px rgba(5, 21, 40, 0.45);
    --jsa-shadow-accent: 0 6px 18px -8px rgba(253, 101, 3, 0.35);

    /* ── layout columns ── */
    --jsa-col: 1200px;            /* header and footer content width    */
    --jsa-col-wide: 1160px;       /* feature grids                      */
    --jsa-col-hero: 900px;
    --jsa-col-head: 700px;        /* centred section intros             */
    --jsa-col-sub: 640px;         /* hero subhead measure               */

    /* ── section rhythm ── */
    --jsa-section-pad: 104px 24px;
    --jsa-section-pad-mobile: 72px 18px;
    --jsa-hero-pad: 96px 24px 88px;
    --jsa-hero-pad-mobile: 76px 18px 68px;
}