/*
 * JDTechSpace Design System
 * Shared visual foundation for public website templates.
 * Components are prefixed with jd-ui- to avoid changing legacy modules before migration.
 */
:root {
    --jd-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --jd-font-editorial: Georgia, "Times New Roman", serif;

    --jd-ink-950: #08111f;
    --jd-ink-900: #101828;
    --jd-ink-700: #344054;
    --jd-ink-600: #475467;
    --jd-ink-500: #667085;
    --jd-ink-400: #98a2b3;
    --jd-line: #e4e7ec;
    --jd-surface: #ffffff;
    --jd-surface-soft: #f8fafc;
    --jd-surface-blue: #eff6ff;
    --jd-brand-700: #1d4ed8;
    --jd-brand-600: #2563eb;
    --jd-brand-100: #dbeafe;
    --jd-success-600: #059669;
    --jd-warning-600: #d97706;
    --jd-danger-600: #dc2626;

    --jd-space-1: 4px;
    --jd-space-2: 8px;
    --jd-space-3: 12px;
    --jd-space-4: 16px;
    --jd-space-5: 20px;
    --jd-space-6: 24px;
    --jd-space-8: 32px;
    --jd-space-10: 40px;
    --jd-space-12: 48px;
    --jd-space-16: 64px;
    --jd-space-20: 80px;

    --jd-radius-sm: 8px;
    --jd-radius-md: 12px;
    --jd-radius-lg: 18px;
    --jd-radius-xl: 24px;
    --jd-radius-round: 999px;

    --jd-shadow-sm: 0 4px 14px rgba(16, 24, 40, .06);
    --jd-shadow-md: 0 14px 34px rgba(16, 24, 40, .09);
    --jd-shadow-lg: 0 24px 64px rgba(16, 24, 40, .13);

    --jd-container: 1200px;
    --jd-reading-width: 760px;
    --jd-header-height: 72px;
}

.jd-ui-container {
    width: min(var(--jd-container), calc(100% - 40px));
    margin-inline: auto;
}

.jd-ui-reading-width {
    width: min(var(--jd-reading-width), 100%);
}

.jd-ui-section {
    padding-block: var(--jd-space-16);
}

.jd-ui-section--soft {
    background: var(--jd-surface-soft);
}

.jd-ui-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--jd-space-2);
    margin: 0 0 var(--jd-space-3);
    color: var(--jd-brand-600);
    font: 800 12px/1.2 var(--jd-font-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.jd-ui-title {
    margin: 0;
    color: var(--jd-ink-900);
    font: 800 clamp(36px, 5vw, 64px)/1.02 var(--jd-font-sans);
    letter-spacing: -.05em;
}

.jd-ui-heading {
    margin: 0;
    color: var(--jd-ink-900);
    font: 780 clamp(28px, 3vw, 42px)/1.12 var(--jd-font-sans);
    letter-spacing: -.035em;
}

.jd-ui-lead {
    margin: var(--jd-space-5) 0 0;
    color: var(--jd-ink-600);
    font: 400 clamp(16px, 1.8vw, 19px)/1.7 var(--jd-font-sans);
}

.jd-ui-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jd-space-3);
    margin-top: var(--jd-space-6);
}

.jd-ui-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--jd-radius-sm);
    color: #fff;
    background: var(--jd-brand-600);
    font: 750 14px/1 var(--jd-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.jd-ui-button:hover {
    color: #fff;
    background: var(--jd-brand-700);
    transform: translateY(-1px);
}

.jd-ui-button--secondary {
    border-color: var(--jd-line);
    color: var(--jd-ink-900);
    background: var(--jd-surface);
}

.jd-ui-button--secondary:hover {
    border-color: var(--jd-brand-600);
    color: var(--jd-brand-700);
    background: var(--jd-surface-blue);
}

.jd-ui-card {
    border: 1px solid var(--jd-line);
    border-radius: var(--jd-radius-lg);
    background: var(--jd-surface);
    box-shadow: var(--jd-shadow-sm);
}

.jd-ui-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--jd-space-6);
}

.jd-ui-field {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #d0d5dd;
    border-radius: var(--jd-radius-sm);
    outline: none;
    color: var(--jd-ink-900);
    background: #fff;
    font: 400 14px/1.45 var(--jd-font-sans);
}

.jd-ui-field:focus {
    border-color: var(--jd-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.jd-ui-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--jd-ink-900);
    font-family: var(--jd-font-sans);
    text-decoration: none;
}

.jd-ui-brand__mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.jd-ui-brand__name {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.jd-ui-brand__tagline {
    display: block;
    margin-top: 4px;
    color: var(--jd-ink-500);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.jd-ui-brand--dark {
    color: #fff;
}

.jd-ui-brand--dark .jd-ui-brand__tagline {
    color: #aebbd0;
}

@media (max-width: 767px) {
    :root {
        --jd-space-16: 48px;
        --jd-space-20: 60px;
    }

    .jd-ui-container {
        width: min(100% - 24px, var(--jd-container));
    }

    .jd-ui-grid {
        gap: var(--jd-space-4);
    }

    .jd-ui-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jd-ui-button {
        width: 100%;
    }
}