/* LTS Design Foundation v1.
 * Normalized from the approved LTS design package while preserving the
 * current production Klee Blue / Ink / Sun / Parchment palette.
 *
 * Important: this file defines visual tokens only. It does not own content,
 * navigation, access, membership, billing, Story, Review or SRS behavior.
 */
:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;

    --lts-blue: #4352A6;
    --lts-night: var(--lts-blue); /* compatibility alias */
    --lts-blue-dark: #3F4FA2;
    --lts-ink: #20344D;
    --lts-sun: #FFC229;
    --lts-parchment: #F6F1E8;
    --lts-paper: #FFFFFF;
    --lts-app-canvas: #FBFAF8;
    --lts-parchment-deep: #E9E1D6;
    --lts-line: var(--lts-parchment-deep);
    --lts-ink-soft: #5F6B7A;
    --lts-sun-soft: #FFF1C7;
    --lts-blue-soft: #F2F4FC;
    --lts-on-blue-soft: #DDE1F5;
    --lts-on-night-soft: var(--lts-on-blue-soft); /* compatibility alias */
    --lts-success: #4E7A5B;
    --lts-error: #9E2B25;
    --lts-ink-hover: #172839;
    --lts-sun-hover: #F2B310;

    /* Shared spacing scale. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;

    /* Shared radii. */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Shared dialog close control. Reuse this size/shape/color for modal cards. */
    --lts-modal-close-size: 48px;
    --lts-modal-close-icon-size: 24px;
    --lts-modal-close-radius: 12px;
    --lts-modal-close-color: #4959AD;

    /* Shared shadows: deliberately sparse. */
    --shadow-soft: 0 12px 34px rgba(32, 52, 77, .08);
    --shadow-active: 0 8px 24px rgba(32, 52, 77, .05);

    /* Canonical content widths. 1360 remains for checkout/commercial layouts
     * that already use the wider canvas; normal product/marketing content uses
     * the approved 1220px design-system container. */
    --container-max: 1220px;
    --lts-layout-wide: 1360px;
    --lts-layout-standard: 1220px;
    --lts-layout-gutter-desktop: 24px;
    --lts-layout-gutter-tablet: 24px;
    --lts-layout-gutter-mobile: 16px;
}

/* Canonical Design Implementation Package v1 structural/reference tokens.
 * Screen references may use these locally when their frozen HTML specifies
 * values that differ slightly from the global brand palette. */
:root {
    --lts-canonical-ref-blue: #4959AD;
    --lts-canonical-ref-ink: #20334D;
    --lts-canonical-ref-ink-soft: #5F6F83;
    --lts-canonical-ref-cream: #F5F0E8;
    --lts-canonical-ref-parchment: #EEE4D8;
    --lts-canonical-ref-line: #E6DDD2;
    --lts-canonical-ref-line-blue: #BFC6E6;
}