/* ============================================================
   Spigot Customer-Facing Design Tokens
   Shared foundation for proposals, site manuals, and future
   client-facing tools.
   ============================================================ */

:root {
    /* Framework-facing tokens: map these to Core Framework variables later. */
    /* Brand faces. The @font-face rules live in the theme (Bricks > Custom
       Fonts) and print site-wide, so client-facing templates inherit them
       through wp_head(). Boston ships 300/400/600 only — never ask for 700+
       or the browser synthesises a faux bold. Bogue is italic-only and is
       used exactly as the main site uses it: for <em>/<i> emphasis. */
    --sp-font-family: 'Boston', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sp-font-serif:  'Bogue', Georgia, 'Times New Roman', serif;
    --sp-weight-light: 300;
    --sp-weight-body:  400;
    --sp-weight-bold:  600;
    --sp-font-2xs: 10px;
    --sp-font-xs:  11px;
    --sp-font-sm:  13px;
    --sp-font-md:  15px;
    --sp-font-base: 16px;
    --sp-font-lg:  17px;
    --sp-font-xl:  18px;
    --sp-font-2xl: 20px;
    --sp-font-3xl: 24px;
    --sp-font-4xl: 32px;
    --sp-font-5xl: 48px;

    --sp-font-hero:            60px;
    --sp-font-section-heading: 40px;
    --sp-font-section-subhead: 32px;
    --sp-font-band-heading:    32px;
    --sp-font-prose-h2:        36px;
    --sp-font-prose-h3:        28px;
    --sp-font-prose-h4:        22px;
    --sp-font-signed-heading:  35px;

    --sp-space-2xs: 4px;
    --sp-space-xs:  8px;
    --sp-space-sm:  12px;
    --sp-space-md:  16px;
    --sp-space-lg:  24px;
    --sp-space-xl:  32px;
    --sp-space-2xl: 48px;
    --sp-space-3xl: 64px;

    --sp-radius-sm: 3px;
    --sp-radius-md: 6px;
    --sp-radius-lg: 8px;
    --sp-radius-full: 100%;
    --sp-shadow-sm: 0 8px 22px rgba(15, 24, 32, 0.08);
    --sp-shadow-md: 0 18px 44px rgba(15, 24, 32, 0.12);

    --sp-dark:    #172430;
    --sp-ex-dark: #0F1820;
    --sp-blue:       #19b8f7;
    --sp-mid:        #2b7bb9;
    --sp-blue-ui:    #2563eb;
    --sp-blue-ui-dk: #0f2a6b;
    --sp-text:    #2d2d2d;
    --sp-muted:   #666;
    --sp-border:  #e0e0e0;
    --sp-bg-soft: #f7f7f7;
    --sp-bg-manual: #f5f5f3;

    --sp-width: 1200px;
    --sp-page-width: 960px;
    --sp-page-x: 64px;
    --sp-page-y: 88px;
    --sp-page-header-y: 88px;
    --sp-page-footer-y: 28px;
}

/* customer-base.css is only ever enqueued on client-facing pages (proposal,
   hub, timeline, content), so a bare body selector is safe here. */
body {
    font-family: var(--sp-font-family);
}

.spigot-proposal-body,
.spigot-manual-body {
    font-family: var(--sp-font-family);
    font-size: var(--sp-font-base);
}

/* Bogue is the emphasis face across every client-facing surface — same rule
   the main site uses (`em, i { font-family: var(--font-serif) }`). Only
   italic weights exist, so this must stay italic. */
body em,
body i,
body cite {
    font-family: var(--sp-font-serif);
    font-style: italic;
    font-weight: var(--sp-weight-body);
}

/* Shared customer-facing layout primitives (proposal/manual/timeline/etc.) */
.sp-customer-container {
    max-width: calc(var(--sp-page-width) + (var(--sp-page-x) * 2));
    margin: 0 auto;
    padding-left: var(--sp-page-x);
    padding-right: var(--sp-page-x);
}

.sp-customer-header {
    background: var(--sp-dark);
    color: #fff;
    padding: var(--sp-page-header-y) 0;
}

.sp-customer-header__inner {
    max-width: var(--sp-page-width);
    margin: 0 auto;
}

.sp-customer-header__logo {
    max-height: 52px;
    width: auto;
    display: block;
    margin-bottom: 28px;
}

.sp-customer-header__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: var(--sp-ex-dark);
    font-size: var(--sp-font-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-blue);
    margin: 0 0 16px;
    font-weight: var(--sp-weight-bold);
}

.sp-customer-header__title {
    margin: 0;
    font-size: var(--sp-font-hero);
    line-height: 1.05;
    color: #fff;
}

.sp-customer-footer {
    background: var(--sp-ex-dark);
    color: rgba(255,255,255,0.45);
    padding: var(--sp-page-footer-y) 0;
    font-size: var(--sp-font-sm);
    letter-spacing: 0.05em;
}

.sp-customer-footer__inner {
    max-width: var(--sp-page-width);
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 900px) {
    :root {
        --sp-font-hero:            56px;
        --sp-font-section-heading: 42px;
        --sp-font-section-subhead: 34px;
        --sp-font-band-heading:    28px;
        --sp-font-prose-h2:        32px;
        --sp-font-prose-h3:        26px;
        --sp-page-x: 32px;
        --sp-page-y: 64px;
        --sp-page-header-y: 64px;
    }
}

@media (max-width: 600px) {
    :root {
        --sp-font-xl:              17px;
        --sp-font-hero:            44px;
        --sp-font-section-heading: 34px;
        --sp-font-section-subhead: 30px;
        --sp-font-band-heading:    24px;
        --sp-font-prose-h2:        28px;
        --sp-font-prose-h3:        23px;
        --sp-page-x: 20px;
        --sp-page-y: 48px;
        --sp-page-header-y: 48px;
    }
}