/* HumiDesk shared UI tokens and accessibility baseline */

:root {
    --hd-ui-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --hd-ui-text-xs: 11px;
    --hd-ui-text-sm: 12px;
    --hd-ui-text-md: 13px;
    --hd-ui-text-lg: 15px;
    --hd-ui-text-xl: 19px;
    --hd-ui-text-2xl: 24px;
    --hd-ui-text-display: 30px;
    --hd-ui-leading-tight: 1.25;
    --hd-ui-leading-normal: 1.55;
    --hd-ui-space-1: 4px;
    --hd-ui-space-2: 8px;
    --hd-ui-space-3: 12px;
    --hd-ui-space-4: 16px;
    --hd-ui-space-5: 20px;
    --hd-ui-space-6: 28px;
    --hd-ui-mobile-gutter: 12px;
    --hd-ui-radius-sm: 10px;
    --hd-ui-radius-md: 12px;
    --hd-ui-radius-lg: 16px;
    --hd-ui-radius-pill: 999px;
    --hd-ui-duration-fast: 120ms;
    --hd-ui-duration: 180ms;
    --hd-ui-duration-slow: 240ms;
    --hd-ui-ease: cubic-bezier(.2, .8, .3, 1);
    --hd-ui-focus: #C4A35A;
}

.humidesk-dashboard,
.humidesk-coach-front {
    --hd-ui-ink: var(--hd-ink, var(--cd-ink, #0f172a));
    --hd-ui-ink-2: var(--hd-ink-2, #334155);
    --hd-ui-ink-3: var(--hd-ink-3, #475569);
    --hd-ui-ink-4: var(--hd-ink-4, #64748b);
    --hd-ui-muted: var(--hd-muted, #94a3b8);
    --hd-ui-surface: var(--hd-surface, #ffffff);
    --hd-ui-surface-2: var(--hd-surface-2, #f8fafc);
    --hd-ui-border: var(--hd-border, var(--cd-line, #e2e8f0));
    --hd-ui-border-2: var(--hd-border-2, #d0d7de);
    --hd-ui-divider: var(--hd-divider, #f1f5f9);
    --hd-ui-accent: var(--color-accent, var(--cd-accent, #C4A35A));
    --hd-ui-accent-soft: color-mix(in srgb, var(--hd-ui-accent), #ffffff 88%);
    --hd-ui-success: var(--hd-success, #16a34a);
    --hd-ui-warning: var(--hd-warning, #d97706);
    --hd-ui-error: var(--hd-error, #dc2626);
    --hd-ui-info: var(--hd-info, #2563eb);
    font-family: var(--hd-ui-font-sans);
}

.humidesk-dashboard__section h4 {
    font-size: var(--hd-ui-text-xl) !important;
    line-height: var(--hd-ui-leading-tight);
}

.humidesk-dashboard__section-note {
    font-size: var(--hd-ui-text-md);
    line-height: var(--hd-ui-leading-normal);
}

.humidesk-dashboard__template-card h5 {
    font-size: var(--hd-ui-text-lg);
    line-height: var(--hd-ui-leading-tight);
}

.humidesk-coach-front__title {
    font-size: var(--hd-ui-text-display);
    line-height: var(--hd-ui-leading-tight);
}

.humidesk-coach-front__sub {
    font-size: var(--hd-ui-text-md);
    line-height: var(--hd-ui-leading-normal);
}

.humidesk-dashboard a:focus-visible,
.humidesk-dashboard button:focus-visible,
.humidesk-dashboard input:focus-visible,
.humidesk-dashboard select:focus-visible,
.humidesk-dashboard textarea:focus-visible,
.humidesk-coach-front a:focus-visible,
.humidesk-coach-front button:focus-visible,
.humidesk-coach-front input:focus-visible,
.humidesk-coach-front select:focus-visible,
.humidesk-coach-front textarea:focus-visible {
    outline: 2px solid var(--hd-ui-focus) !important;
    outline-offset: 2px !important;
}

.humidesk-dashboard .screen-reader-text:focus,
.humidesk-coach-front .screen-reader-text:focus {
    outline: 2px solid var(--hd-ui-focus);
    outline-offset: 2px;
}


@media (max-width: 900px) {
    body.hd-workspace-desk .inside-article,
    body.hd-workspace-coach .inside-article,
    body.hd-workspace-desk .entry-content,
    body.hd-workspace-coach .entry-content,
    body.hd-workspace-desk .site-content,
    body.hd-workspace-coach .site-content,
    body.hd-workspace-desk .content-area,
    body.hd-workspace-coach .content-area,
    body.hd-workspace-desk .site-main,
    body.hd-workspace-coach .site-main,
    body:has(.humidesk-dashboard) .inside-article,
    body:has(.humidesk-coach-front) .inside-article,
    body:has(.humidesk-dashboard) .entry-content,
    body:has(.humidesk-coach-front) .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobile workspace gutter: neutralize theme container padding and use one token. */
@media (max-width: 900px) {
    body .humidesk-dashboard,
    body .humidesk-coach-front {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        padding-left: var(--hd-ui-mobile-gutter) !important;
        padding-right: var(--hd-ui-mobile-gutter) !important;
        box-sizing: border-box;
    }
}