/* design-1 — base layer. ALL selectors are scoped under [data-ui="wp"]; box-sizing is applied only to the
   wp subtree (never global *), so existing Bootstrap pages are untouched. */

[data-ui="wp"] { box-sizing: border-box; }
[data-ui="wp"] *, [data-ui="wp"] *::before, [data-ui="wp"] *::after { box-sizing: border-box; }

[data-ui="wp"] {
    background: var(--wp-bg);
    color: var(--wp-text);
    font-family: var(--wp-font);
    font-size: var(--wp-fs-body);
    font-weight: var(--wp-fw-regular);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[data-ui="wp"] a { color: var(--wp-blue); text-decoration: none; }
[data-ui="wp"] a:hover { color: var(--wp-blue-hover); text-decoration: underline; }

/* Type roles — utility classes (Satzschreibung; kein Title Case). */
[data-ui="wp"] .wp-title    { font-size: var(--wp-fs-title);       font-weight: var(--wp-fw-medium); margin: 0; }
[data-ui="wp"] .wp-section  { font-size: var(--wp-fs-section);     font-weight: var(--wp-fw-medium); margin: 0; }
[data-ui="wp"] .wp-formsec  { font-size: var(--wp-fs-formsection); font-weight: var(--wp-fw-medium); }
[data-ui="wp"] .wp-muted    { color: var(--wp-text-2); }
[data-ui="wp"] .wp-caption  { font-size: var(--wp-fs-caption);     color: var(--wp-text-muted); }

/* Shared icon sizing; Tabler-style stroke icons inherit currentColor (grey in nav, blue in the command bar). */
[data-ui="wp"] .wp-icon {
    width: 17px; height: 17px; flex: 0 0 auto; vertical-align: middle;
    stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[data-ui="wp"] .wp-icon--16 { width: 16px; height: 16px; }

/* Focus ring — the single elevation in the whole system (§3). */
[data-ui="wp"] :focus-visible { outline: none; box-shadow: var(--wp-focus-ring); border-color: var(--wp-blue); }

[data-ui="wp"] hr.wp-hairline { border: 0; border-top: var(--wp-hairline) solid var(--wp-line); margin: var(--wp-s3) 0; }