/* Hubanero Studio design tokens. Hosts select theme and density; components consume semantic values. */
:root {
    color-scheme: light;
    --h-font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    --h-font-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    --h-text-xs: .6875rem;
    --h-text-sm: .75rem;
    --h-text-md: .875rem;
    --h-text-lg: 1rem;
    --h-text-xl: 1.25rem;
    --h-leading: 1.45;
    --h-space-1: .25rem;
    --h-space-2: .5rem;
    --h-space-3: .75rem;
    --h-space-4: 1rem;
    --h-space-6: 1.5rem;
    --h-space-8: 2rem;
    --h-radius-sm: .4375rem;
    --h-radius: .5rem;
    --h-radius-lg: .6875rem;
    --h-shadow: 0 18px 50px rgb(12 14 20 / .18);
    --h-focus-width: 2px;
    --h-focus-offset: 2px;
    --h-motion: 120ms;
    --h-z-sticky: 10;
    --h-z-popover: 100;
    --h-z-overlay: 200;
    --h-z-toast: 300;
    --h-content-width: 90rem;
    --h-control-height: 2.25rem;
    --h-control-padding: .625rem;
    --h-gap: .625rem;
    --h-row-height: 2.375rem;
    --h-font-size: .875rem;
    --h-bg: #f6f6f8;
    --h-surface: #fff;
    --h-surface-raised: #edeef2;
    --h-surface-sunken: #f6f6f8;
    --h-sidebar: #fff;
    --h-hover: #e6e7ee;
    --h-selected: #fff0e9;
    --h-text: #18191e;
    --h-muted: #646773;
    --h-muted-strong: #494c56;
    --h-line: #dedfe6;
    --h-line-strong: #c9cbd4;
    --h-divider: #dedfe6;
    --h-control-border: #767986;
    --h-control-border-hover: #555963;
    --h-accent: #c23c10;
    --h-accent-soft: #fff0e9;
    --h-action: #d6400c;
    --h-action-end: #c8400d;
    --h-on-action: #fff;
    --h-danger: #b42318;
    --h-success: #377448;
    --h-warning: #805000;
    --h-info: #235ca1;
    --h-on-status: #fff;
    --h-focus: #d6400c;
    --h-backdrop: rgb(9 11 16 / .58);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-hubanero-theme="light"]) {
        color-scheme: dark;
        --h-bg: #0b0c10;
        --h-surface: #13151b;
        --h-surface-raised: #1b1e26;
        --h-surface-sunken: #0b0c10;
    --h-sidebar: #101118;
        --h-hover: #20232d;
        --h-selected: #35251e;
        --h-text: #f4f4f7;
        --h-muted: #999eae;
        --h-muted-strong: #c2c5d0;
        --h-line: #292d37;
        --h-line-strong: #3a404c;
        --h-divider: #292d37;
        --h-control-border: #737987;
        --h-control-border-hover: #a0a6b3;
        --h-accent: #ff9867;
        --h-accent-soft: #35251e;
        --h-action: #c73608;
        --h-action-end: #c8400d;
        --h-on-action: #fff;
        --h-danger: #ff9b93;
        --h-success: #a1d7ac;
        --h-warning: #ffce79;
        --h-info: #9bc6ff;
        --h-on-status: #090b10;
        --h-focus: #ff9867;
        --h-backdrop: rgb(0 0 0 / .72);
    }
}

[data-hubanero-theme="light"], [data-h-theme="light"], .h-scope[data-h-theme="light"] {
    color-scheme: light;
    --h-bg: #f6f6f8;
    --h-surface: #fff;
    --h-surface-raised: #edeef2;
    --h-surface-sunken: #f6f6f8;
    --h-sidebar: #fff;
    --h-hover: #e6e7ee;
    --h-selected: #fff0e9;
    --h-text: #18191e;
    --h-muted: #646773;
    --h-muted-strong: #494c56;
    --h-line: #dedfe6;
    --h-line-strong: #c9cbd4;
    --h-divider: #dedfe6;
    --h-control-border: #767986;
    --h-control-border-hover: #555963;
    --h-accent: #c23c10;
    --h-accent-soft: #fff0e9;
    --h-action: #d6400c;
    --h-action-end: #c8400d;
    --h-on-action: #fff;
    --h-danger: #b42318;
    --h-success: #377448;
    --h-warning: #805000;
    --h-info: #235ca1;
    --h-on-status: #fff;
    --h-focus: #d6400c;
    --h-backdrop: rgb(9 11 16 / .58);
}

[data-hubanero-theme="dark"], .h-scope[data-h-theme="dark"], [data-h-theme="dark"] {
    color-scheme: dark;
    --h-bg: #0b0c10;
    --h-surface: #13151b;
    --h-surface-raised: #1b1e26;
    --h-surface-sunken: #0b0c10;
    --h-sidebar: #101118;
    --h-hover: #20232d;
    --h-selected: #35251e;
    --h-text: #f4f4f7;
    --h-muted: #999eae;
    --h-muted-strong: #c2c5d0;
    --h-line: #292d37;
    --h-line-strong: #3a404c;
    --h-divider: #292d37;
    --h-control-border: #737987;
    --h-control-border-hover: #a0a6b3;
    --h-accent: #ff9867;
    --h-accent-soft: #35251e;
    --h-action: #c73608;
    --h-action-end: #c8400d;
    --h-on-action: #fff;
    --h-danger: #ff9b93;
    --h-success: #a1d7ac;
    --h-warning: #ffce79;
    --h-info: #9bc6ff;
    --h-on-status: #090b10;
    --h-focus: #ff9867;
    --h-backdrop: rgb(0 0 0 / .72);
}

[data-h-density="compact"] {
    --h-control-height: 2rem;
    --h-control-padding: .5rem;
    --h-gap: .5rem;
    --h-row-height: 2.125rem;
    --h-font-size: .8125rem;
}

[data-h-density="comfortable"] {
    --h-control-height: 2.5rem;
    --h-control-padding: .75rem;
    --h-gap: .75rem;
    --h-row-height: 2.75rem;
    --h-font-size: .9375rem;
}

.h-scope {
    font-family: var(--h-font);
    font-size: var(--h-font-size);
    line-height: var(--h-leading);
    color: var(--h-text);
    background: var(--h-bg);
    min-width: 0;
    min-height: 0;
}

.h-scope :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--h-focus-width) solid var(--h-focus);
    outline-offset: var(--h-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    :root, .h-scope { --h-motion: 0ms; }
}

@media (forced-colors: active) {
    :root, .h-scope {
        --h-bg: Canvas;
        --h-surface: Canvas;
        --h-surface-raised: Canvas;
        --h-surface-sunken: Canvas;
        --h-sidebar: Canvas;
        --h-surface-sunken: Canvas;
        --h-hover: Canvas;
        --h-text: CanvasText;
        --h-muted: CanvasText;
        --h-line: ButtonText;
        --h-line-strong: ButtonText;
        --h-divider: CanvasText;
        --h-control-border: ButtonText;
        --h-control-border-hover: Highlight;
        --h-focus: Highlight;
        --h-accent: LinkText;
        --h-action: ButtonFace;
        --h-action-end: ButtonFace;
        --h-on-action: ButtonText;
        --h-selected: Highlight;
        --h-danger: CanvasText;
        --h-success: CanvasText;
        --h-warning: CanvasText;
        --h-info: CanvasText;
        --h-on-status: Canvas;
    }
}

.h-text { font-family: var(--h-font); font-size: var(--h-font-size); line-height: var(--h-leading); color: var(--h-text); overflow-wrap: anywhere; max-width: 100%; }
.h-text[data-size="size100"] { font-size: .625rem; }
.h-text[data-size="size200"] { font-size: .75rem; }
.h-text[data-size="size300"] { font-size: .875rem; }
.h-text[data-size="size400"] { font-size: 1rem; }
.h-text[data-size="size500"] { font-size: 1.25rem; }
.h-text[data-size="size600"] { font-size: 1.5rem; }
.h-text[data-size="size700"] { font-size: 1.75rem; }
.h-text[data-size="size800"] { font-size: 2rem; }
.h-text[data-size="size900"] { font-size: 2.5rem; }
.h-text[data-size="size1000"] { font-size: 4.25rem; }
.h-text[data-weight="regular"] { font-weight: 400; }
.h-text[data-weight="medium"] { font-weight: 500; }
.h-text[data-weight="semibold"] { font-weight: 600; }
.h-text[data-weight="bold"] { font-weight: 700; }
.h-text[data-align="start"] { text-align: start; }
.h-text[data-align="center"] { text-align: center; }
.h-text[data-align="end"] { text-align: end; }
.h-text[data-align="justify"] { text-align: justify; }
.h-text[data-font="numeric"] { font-variant-numeric: tabular-nums; }
.h-text[data-font="monospace"] { font-family: var(--h-font-mono); }
.h-text[data-color="primary"] { color: var(--h-accent); }
.h-text[data-color="lightweight"], .h-text[data-color="disabled"] { color: var(--h-muted); }
.h-text[data-color="warning"] { color: var(--h-warning); }
.h-text[data-color="info"] { color: var(--h-info); }
.h-text[data-color="error"] { color: var(--h-danger); }
.h-text[data-color="success"] { color: var(--h-success); }
.h-text[data-block="true"] { display: block; }
.h-text[data-nowrap="true"] { white-space: nowrap; }
.h-text[data-truncate="true"] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-text[data-italic="true"] { font-style: italic; }
.h-text[data-decoration="underline"] { text-decoration: underline; }
.h-text[data-decoration="line-through"] { text-decoration: line-through; }
.h-text[data-decoration="underline line-through"] { text-decoration: underline line-through; }