/* JobPilot design tokens — single source of truth for the marketing surface. */

:root{
    /* Brand palette */
    --jp-ink:#121212;
    --jp-ink-soft:#302D27;
    --jp-charcoal:#1E1E1C;
    --jp-muted:#68655D;
    --jp-muted-soft:#8A8170;
    --jp-line:rgba(18,18,18,.10);
    --jp-line-strong:rgba(18,18,18,.18);
    --jp-panel:#FFFFFF;
    --jp-panel-soft:rgba(255,255,255,.86);
    --jp-canvas:#F7F5EF;
    --jp-canvas-2:#EEE6D5;
    --jp-canvas-3:#FBFAF6;

    --jp-accent:#E7C75A;
    --jp-accent-soft:#F6E7A9;
    --jp-accent-wash:#FBF6E2;
    --jp-accent-ink:#5A4A17;

    --jp-success:#2F8F68;
    --jp-success-wash:rgba(47,143,104,.11);
    --jp-danger:#B33A2E;
    --jp-danger-wash:rgba(179,58,46,.10);

    /* Phase 2 (homepage redesign) — directional brand extension.
       Growth reads as mature progress vs. the brighter success green.
       Horizon is the soft sky-cream gradient used for the hero / section
       backgrounds — adds a sense of morning light + direction without
       reaching for stock photography.
       Accent-glow is the radial pulse used behind live indicators and
       focal CTAs — already inlined in places, now a single token. */
    --jp-growth:#1F5C3F;
    --jp-growth-wash:rgba(31,92,63,.10);
    --jp-horizon:linear-gradient(180deg,#FFFBEF 0%,var(--jp-canvas) 60%,var(--jp-canvas-2) 100%);
    --jp-accent-glow:radial-gradient(circle,rgba(231,199,90,.45) 0%,rgba(231,199,90,0) 70%);

    /* Animation timings shared across the homepage's kinetic surfaces. */
    --jp-shimmer-duration:3.4s;
    --jp-grow-duration:600ms;

    /* Spacing scale (4px base) */
    --jp-space-1:4px;
    --jp-space-2:8px;
    --jp-space-3:12px;
    --jp-space-4:16px;
    --jp-space-5:20px;
    --jp-space-6:24px;
    --jp-space-7:32px;
    --jp-space-8:40px;
    --jp-space-9:56px;
    --jp-space-10:72px;
    --jp-space-11:96px;

    /* Radii */
    --jp-radius-sm:12px;
    --jp-radius-md:18px;
    --jp-radius-lg:24px;
    --jp-radius-xl:32px;
    --jp-radius-pill:999px;

    /* Typography scale (clamped for fluid responsiveness) */
    --jp-font-sans:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    /* Display face for headlines (looser, more refined than Inter Black)
       and an italic serif used sparingly for one emphasised phrase. */
    --jp-font-display:'Geist','Geist Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --jp-font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
    --jp-text-xs:12px;
    --jp-text-sm:13px;
    --jp-text-base:15px;
    --jp-text-md:17px;
    --jp-text-lg:20px;
    --jp-text-xl:clamp(22px,2vw,28px);
    --jp-text-2xl:clamp(28px,2.6vw,36px);
    --jp-text-3xl:clamp(34px,3.4vw,48px);
    --jp-text-4xl:clamp(40px,5vw,64px);
    --jp-text-5xl:clamp(48px,6.8vw,92px);

    --jp-leading-tight:1.02;
    --jp-leading-snug:1.2;
    --jp-leading-body:1.6;

    --jp-tracking-tight:-.035em;
    --jp-tracking-snug:-.025em;
    --jp-tracking-eyebrow:.08em;

    /* Shadows */
    --jp-shadow-sm:0 6px 18px rgba(35,31,24,.06);
    --jp-shadow-md:0 12px 36px rgba(35,31,24,.08);
    --jp-shadow-lg:0 24px 70px rgba(35,31,24,.10);
    --jp-shadow-glow:0 18px 60px rgba(231,199,90,.30);
    /* Layered "floating product" shadow: tight contact shadow + long soft
       ambient one. Used on the hero composite cards. */
    --jp-shadow-float:0 1px 2px rgba(23,20,14,.06),0 8px 24px -6px rgba(23,20,14,.10),0 40px 80px -24px rgba(23,20,14,.22);

    /* Motion */
    --jp-ease:cubic-bezier(.22,.61,.36,1);
    --jp-duration-fast:120ms;
    --jp-duration-base:220ms;
    --jp-duration-slow:420ms;

    /* Layout — shell widths bumped to use modern wide-desktop real estate.
       1480px feels expansive on a 1920px viewport without going edge-to-edge
       on ultra-wide displays. `--jp-shell-narrow` stays small for prose-heavy
       surfaces (legal stubs, profile detail) where readability matters more
       than canvas-fill. */
    --jp-shell:1280px;
    --jp-shell-wide:1480px;
    --jp-shell-narrow:920px;
    --jp-gutter:20px;

    /* Z-index */
    --jp-z-nav:50;
    --jp-z-overlay:80;
    --jp-z-modal:100;
}

/* Dark theme (Pilot UI 2.0 Phase 5): the legacy tokens follow the --ui-*
   roles, so marketing and chrome pages switch with everything else.
   --jp-charcoal stays charcoal: it fills fixed dark bands and buttons
   whose text is always white. */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        --jp-ink:var(--ui-ink); --jp-ink-soft:var(--ui-ink-2);
        --jp-muted:var(--ui-muted); --jp-muted-soft:var(--ui-muted);
        --jp-line:var(--ui-line); --jp-line-strong:var(--ui-line);
        --jp-panel:var(--ui-panel); --jp-panel-soft:var(--ui-panel);
        --jp-canvas:var(--ui-canvas); --jp-canvas-2:var(--ui-sunken); --jp-canvas-3:var(--ui-panel);
        --jp-accent-soft:var(--ui-gold-wash); --jp-accent-wash:var(--ui-gold-wash); --jp-accent-ink:var(--ui-gold-ink);
        --jp-success:var(--ui-success); --jp-success-wash:var(--ui-success-wash);
        --jp-danger:var(--ui-danger); --jp-danger-wash:var(--ui-danger-wash);
        --jp-growth:var(--ui-success); --jp-growth-wash:var(--ui-success-wash);
        --jp-horizon:linear-gradient(180deg,var(--jp-canvas) 0%,var(--jp-canvas-2) 100%);
        --jp-shadow-sm:var(--ui-shadow-raised); --jp-shadow-md:var(--ui-shadow-overlay);
        --jp-shadow-lg:var(--ui-shadow-overlay); --jp-shadow-float:var(--ui-shadow-overlay);
    }
}
:root[data-theme="dark"]{
    --jp-ink:var(--ui-ink); --jp-ink-soft:var(--ui-ink-2);
    --jp-muted:var(--ui-muted); --jp-muted-soft:var(--ui-muted);
    --jp-line:var(--ui-line); --jp-line-strong:var(--ui-line);
    --jp-panel:var(--ui-panel); --jp-panel-soft:var(--ui-panel);
    --jp-canvas:var(--ui-canvas); --jp-canvas-2:var(--ui-sunken); --jp-canvas-3:var(--ui-panel);
    --jp-accent-soft:var(--ui-gold-wash); --jp-accent-wash:var(--ui-gold-wash); --jp-accent-ink:var(--ui-gold-ink);
    --jp-success:var(--ui-success); --jp-success-wash:var(--ui-success-wash);
    --jp-danger:var(--ui-danger); --jp-danger-wash:var(--ui-danger-wash);
    --jp-growth:var(--ui-success); --jp-growth-wash:var(--ui-success-wash);
    --jp-horizon:linear-gradient(180deg,var(--jp-canvas) 0%,var(--jp-canvas-2) 100%);
    --jp-shadow-sm:var(--ui-shadow-raised); --jp-shadow-md:var(--ui-shadow-overlay);
    --jp-shadow-lg:var(--ui-shadow-overlay); --jp-shadow-float:var(--ui-shadow-overlay);
}

/* Utility: page shell with consistent gutter behaviour. Use on top-level marketing sections. */
.jp-shell{
    width:min(var(--jp-shell),calc(100% - var(--jp-gutter) * 2));
    margin-left:auto;
    margin-right:auto;
}
.jp-shell--wide{width:min(var(--jp-shell-wide),calc(100% - var(--jp-gutter) * 2))}
.jp-shell--narrow{width:min(var(--jp-shell-narrow),calc(100% - var(--jp-gutter) * 2))}

/* Headlines use the display face site-wide; body copy stays Inter. */
h1,h2,h3{font-family:var(--jp-font-display);text-wrap:balance}

/* Eyebrow — reused on every marketing section. */
.jp-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:var(--jp-space-2);
    padding:9px 13px;
    border:1px solid var(--jp-line);
    background:var(--jp-panel-soft);
    color:var(--ui-ink-2);
    border-radius:var(--jp-radius-pill);
    font-size:var(--jp-text-xs);
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:var(--jp-tracking-eyebrow);
}
.jp-eyebrow::before{
    content:'';
    width:7px;height:7px;
    border-radius:50%;
    background:var(--jp-accent);
}
.jp-eyebrow--dark{background:rgba(231,199,90,.14);color:var(--jp-accent-soft);border-color:rgba(231,199,90,.24)}
.jp-eyebrow--accent{background:var(--jp-accent-wash);color:var(--jp-accent-ink);border-color:rgba(231,199,90,.32)}

/* Section-level heading group — title + supporting text. */
.jp-section-head{
    display:grid;
    gap:var(--jp-space-4);
    max-width:780px;
    margin-bottom:var(--jp-space-8);
}
.jp-section-head h2{
    font-size:var(--jp-text-3xl);
    line-height:var(--jp-leading-tight);
    letter-spacing:var(--jp-tracking-tight);
    font-weight:900;
}
.jp-section-head p{
    color:var(--jp-muted);
    font-size:var(--jp-text-md);
    line-height:var(--jp-leading-body);
    font-weight:550;
}
.jp-section-head--split{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:var(--jp-space-6);
    max-width:none;
}
@media(max-width:860px){
    .jp-section-head--split{align-items:flex-start;flex-direction:column}
}

/* Generic surface — every panel/card on marketing pages starts here. */
.jp-surface{
    background:var(--jp-panel-soft);
    border:1px solid var(--jp-line);
    border-radius:var(--jp-radius-lg);
    box-shadow:var(--jp-shadow-sm);
}
.jp-surface--solid{background:var(--jp-panel)}
.jp-surface--dark{
    background:linear-gradient(145deg,#24231F,#111);
    color:#fff;
    border-color:rgba(255,255,255,.08);
}
.jp-surface--accent{background:var(--jp-accent-wash);border-color:rgba(231,199,90,.32)}

/* Pill — reusable for tags/chips */
.jp-pill{
    display:inline-flex;
    align-items:center;
    gap:var(--jp-space-2);
    padding:8px 12px;
    border-radius:var(--jp-radius-pill);
    background:var(--jp-panel);
    border:1px solid var(--jp-line);
    color:var(--jp-ink-soft);
    font-size:var(--jp-text-sm);
    font-weight:750;
}
.jp-pill--accent{background:var(--jp-accent-wash);color:var(--jp-accent-ink);border-color:rgba(231,199,90,.32)}
.jp-pill--dark{background:linear-gradient(145deg,var(--jp-charcoal),#111);color:#fff;border-color:transparent}
.jp-pill--success{background:var(--jp-success-wash);color:var(--jp-success);border-color:rgba(47,143,104,.18)}
.jp-pill--danger{background:var(--jp-danger-wash);color:var(--jp-danger);border-color:rgba(179,58,46,.18)}