/* CLogix Signing Site — design tokens + base surface (Story 5.1).
   Values verbatim from the UX spine (DESIGN.md §Colors/§Typography/§Shapes; mock-signing-site.html is the
   canonical frame). Light + dark are both first-class; the site follows the OS preference
   (prefers-color-scheme) — no toggle on a single-purpose public page. WCAG 2.2 AA is the floor in BOTH modes:
   solid (no-alpha) 3px focus ring, ≥44px targets (48px here, per the mock), reduced-motion honoured. */

:root {
    /* Brand / primary — Heritage Navy */
    --primary: #02487C;
    --primary-hover: #023A66;
    --on-primary: #FFFFFF;
    /* Accent — softened warm yellow (signature only, never a button fill) */
    --accent: #E8C53A;
    --on-accent: #3A2F00;
    /* Mark-only brand values (deeper/brighter than the in-app tokens) */
    --mark-navy: #01162e;
    --mark-yellow: #f8c204;
    /* Surfaces */
    --surface: #FFFFFF;
    --surface-raised: #F5F7FA;
    --surface-sunken: #ECEEF2;
    /* Text */
    --text: #0E1B2A;
    --text-muted: #5B687A;
    /* Borders — soft hairline is decorative-only; borderStrong is the interactive-control boundary (≥3:1) */
    --border: #DCE3EC;
    --border-strong: #79899F;
    /* Focus — dedicated token; rendered SOLID (no alpha), 3px, offset — never removed */
    --focus: #1565C0;
    /* Status + on-wash text tokens (chip text never uses the base hue on a pale wash) */
    --success: #15803D;
    --success-on-wash: #0E6B30;
    --warning: #C2820B;
    --warning-on-wash: #855906;
    --danger: #C0392B;
    --danger-on-wash: #A02A1E;
    --info: #1565C0;
    /* Elevation */
    --shadow-1: 0 1px 2px rgba(14, 27, 42, .06);
    --shadow-2: 0 8px 24px rgba(14, 27, 42, .10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #4F9BD8;
        --primary-hover: #6BB0E4;
        --on-primary: #04243F;
        --surface: #0B1622;
        --surface-raised: #122236;
        --surface-sunken: #081019;
        --text: #E8EEF5;
        --text-muted: #8FA2B6;
        --border: #1E3247;
        --border-strong: #5C84AA;
        --focus: #5BA8E8;
        --success: #4ADE80;
        --success-on-wash: #4ADE80;
        --warning: #F0C140;
        --warning-on-wash: #F0C140;
        --danger: #F1746A;
        --danger-on-wash: #F1746A;
        --info: #5BA8E8;
        /* Dark depth leans on lighter surface tone, not darker shadow */
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
    }
}

/* ---- Base document ---- */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: -apple-system, "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Solid 3px offset focus ring — no opacity/alpha (WCAG 2.4.13; the spine supersedes the mock's alpha
   depiction). Never removed, only restyled. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Reduced motion: all non-essential motion off (UX floor). */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- Signing-site frame: mobile-first single column ---- */

.siteband {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin-inline: auto;
    padding: 16px 18px 8px;
}

.mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    background: var(--mark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mark svg {
    display: block;
}

.brandcol {
    display: flex;
    flex-direction: column;
}

.wordmark {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1;
}

.wordmark strong {
    font-weight: 700;
}

.site-main {
    max-width: 640px;
    margin-inline: auto;
    padding: 8px 18px 24px;
}

/* ---- Typography helpers (spine ramp) ---- */

.t-h1 {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.t-caption {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lead {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.muted {
    color: var(--text-muted);
}

/* ---- Card + stack ---- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-1);
}

.stack>*+* {
    margin-top: 16px;
}

/* ---- Buttons (base for 5.2+; ≥44px targets — 48px per the mock) ---- */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    padding: 12px 16px;
    transition: box-shadow .18s ease, transform .18s ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
}

.btn-primary:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--surface);
    color: var(--primary);
    border: 1px solid var(--border-strong);
}

/* ---- Contract document surface (5.4): the inline PDF + download fallback ---- */

.doc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.doc-embed {
    display: block;
    width: 100%;
    /* Story 12.7: proportionate, bounded — no fixed-420px dead zone on phones, never dwarfing the
       signature card on tall screens. The box is kept only when signing.js confirms a viewable PDF. */
    height: clamp(280px, 55vh, 560px);
    border: 0;
}

.doc-fallback {
    padding: 16px;
    margin: 0;
    color: var(--text-muted);
}

.doc-download {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
}

.doc-download a {
    color: var(--primary);
    font-weight: 600;
    /* A text link still needs a comfortable touch target. */
    display: inline-block;
    padding: 10px 0;
}

/* ---- Draw pad (5.4, progressive — revealed by signing.js) ---- */

.sigpad {
    margin-top: 16px;
}

.sigpad-canvas {
    display: block;
    width: 100%;
    height: 160px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    touch-action: none;
}

.sigpad-clear {
    margin-top: 8px;
}

/* ---- Form fields (base for 5.3+): borderStrong is the control's sole edge — never the soft hairline ---- */

.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 6px;
    color: var(--text);
}

.field {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    padding: 12px 14px;
    font-size: 15px;
}