/*
 * Design system: base. Element defaults built on tokens.css, scoped to `.ds-scope`.
 * Every element selector is wrapped in `:where()`, so a component class always wins.
 */

/*
 * ⚠ Temporary: every element shows the default arrow cursor. Delete this block to restore normal cursors.
 */
.ds-scope,
.ds-scope * {
    cursor: default !important;
}

/* `[hidden]` is a UA rule that any author `display` beats, and most components set one.
   `!important` keeps `element.hidden = true` working. */
[hidden] {
    display: none !important;
}

.ds-scope {
    font-family: var(--ds-font-body);
    font-size: var(--ds-text-body);
    font-weight: var(--ds-weight-regular);
    line-height: var(--ds-leading-normal);
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    -webkit-font-smoothing: antialiased;
}

/*
 * Every rounded box is a squircle. `corner-shape` does not inherit, hence the universal selector.
 * The pseudo-elements have their own selectors: inside `:where()` they are invalid and void the whole rule.
 * Pills and circles opt out with `corner-shape: round`.
 */

:where(.ds-scope, .ds-scope *),
:where(.ds-scope, .ds-scope *)::before,
:where(.ds-scope, .ds-scope *)::after {
    corner-shape: squircle;
}

.ds-scope :where(h1, h2, h3) {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: var(--ds-weight-semibold);
    line-height: var(--ds-leading-tight);
    color: var(--ds-color-text);
}

.ds-scope :where(h1) { font-size: var(--ds-text-page-title); }
.ds-scope :where(h2) { font-size: var(--ds-text-header); }
.ds-scope :where(h3) { font-size: var(--ds-text-section); }

.ds-scope :where(p) { margin: 0; }

.ds-scope :where(a) {
    color: var(--ds-color-primary);
    text-decoration: none;
}

.ds-scope :where(a):hover { text-decoration: underline; }

.ds-scope :where(small) {
    font-size: var(--ds-text-meta);
    color: var(--ds-color-text-muted);
}

.ds-scope :where(code, pre) {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-meta);
}

.ds-scope :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}