/* Generated from src/design/components.mjs. Run npm run generate:components. */
:root { --component-radius-control: 999px; --component-radius-card: 12px; --component-shadow-card: 0 8px 24px color-mix(in srgb, var(--color-brand-dark) 8%, transparent); }
:root, [data-exposure-surface="light"] {
 --surface-heading: var(--color-heading-on-light); --surface-body: var(--color-body-on-light);
 --surface-border: var(--color-border-subtle); --surface-panel: var(--color-imported-section-surface-lift);
 --surface-action-bg: var(--color-button-primary-bg); --surface-action-text: var(--color-button-primary-text);
 --surface-label: var(--color-label-bg);
}
[data-exposure-surface="dark"], [data-exposure-surface="media"] {
 --surface-heading: var(--color-heading-on-dark); --surface-body: var(--color-body-on-dark);
 --surface-border: var(--color-on-dark-border); --surface-panel: var(--color-on-dark-control-bg-subtle);
 --surface-action-bg: var(--color-brand-paper); --surface-action-text: var(--color-brand-dark);
 --surface-label: var(--color-on-dark-chip-bg);
}
[data-exposure-surface] { color: var(--surface-body);
--_🎨-color--tokens---border--subtle: var(--surface-border);
--_🎨-color--tokens---text-heading--strong: var(--surface-heading);
--_🎨-color--tokens---text-heading--medium: var(--surface-heading);
--_🎨-color--tokens---text-body--strong: var(--surface-body);
--_🎨-color--tokens---text-body--medium: var(--surface-body);
--_🎨-color--tokens---text-body--subtle: var(--surface-body);
--_🎨-color--tokens---text-label--strong: var(--surface-heading);
--_🎨-color--tokens---text-label--medium: var(--surface-heading);
--_🎨-color--tokens---button-primary-default--background: var(--surface-action-bg);
--_🎨-color--tokens---button-primary-default--text: var(--surface-action-text);
--_🎨-color--tokens---button-primary-default--border: var(--surface-action-bg);
--_🎨-color--tokens---button-primary-hover--background: var(--surface-action-bg);
--_🎨-color--tokens---button-primary-hover--text: var(--surface-action-text);
--_🎨-color--tokens---button-primary-hover--border: var(--surface-action-bg);
--_🎨-color--tokens---button-secondary-default--text: var(--surface-heading);
--_🎨-color--tokens---button-secondary-default--border: var(--surface-border);
--_🎨-color--tokens---button-secondary-default--background: transparent;
--_🎨-color--tokens---button-secondary-hover--text: var(--surface-action-text);
--_🎨-color--tokens---button-secondary-hover--border: var(--surface-border);
--_🎨-color--tokens---button-secondary-hover--background: var(--surface-action-bg);
 --_colors---primary--black: var(--surface-heading);
 --_colors---primary--ink: var(--surface-heading);
 --_colors---primary--muted: var(--surface-body);
 --_colors---grey--400: var(--surface-body);
 --_colors---grey--500: var(--surface-body);
}
[data-exposure-component="button"] {
 color: var(--surface-action-text); background-color: var(--surface-action-bg);
 border-color: var(--surface-action-bg); border-radius: var(--component-radius-control); box-shadow: none;
 font-family: var(--font-display); cursor: pointer;
}
[data-exposure-component="button"] .button-bg { background: var(--surface-action-bg); border-color: var(--surface-action-bg); border-radius: inherit; }
[data-exposure-component="button"][data-exposure-variant="secondary"] { color: var(--surface-heading); background: transparent; border-color: var(--surface-border); }
[data-exposure-component="button"][data-exposure-variant="secondary"] .button-bg { background: transparent; border-color: var(--surface-border); }
[data-exposure-component="button"][data-exposure-variant="overlay"] { background: transparent; color: transparent; border-color: transparent; box-shadow: none; }
[data-exposure-component="button"]:hover { filter: brightness(.94); }
[data-exposure-component="button"][data-exposure-variant="secondary"]:hover { color: var(--surface-action-text); background: var(--surface-action-bg); }
[data-exposure-component="button"][data-exposure-variant="secondary"]:hover .button-bg { background: var(--surface-action-bg); }
[data-exposure-component="label"] { color: var(--surface-heading); background: var(--surface-label); border-color: transparent; border-radius: var(--component-radius-control); box-shadow: none; }
[data-exposure-component="label"][data-exposure-variant="depth"] { background: var(--color-imported-section-surface-depth); color: var(--color-heading-on-light); }
[data-exposure-component="label"] :where(.label-small, .label-plus_text) { color: inherit; }
[data-exposure-component="card"] { color: var(--surface-body); background-color: var(--surface-panel); border-color: var(--surface-border); border-radius: var(--component-radius-card); box-shadow: none; }
[data-exposure-component="card"][data-exposure-variant="raised"] { box-shadow: var(--component-shadow-card); }
[data-exposure-component="control"] { color: var(--surface-heading); background: var(--surface-panel); border-color: var(--surface-border); border-radius: var(--component-radius-control); box-shadow: none; }
[data-exposure-component="control"][data-exposure-variant="media"] { color: var(--color-heading-on-dark); background: var(--color-brand-dark-scrim-strong); border-color: var(--color-on-dark-control-border); }
[data-exposure-component="control"][data-exposure-variant="text"] { color: var(--surface-heading); background: transparent; border-color: transparent; }
[data-exposure-component="control"].is-active { color: var(--surface-action-text); background: var(--surface-action-bg); }
[data-exposure-component="control"]:hover { background: var(--surface-action-bg); color: var(--surface-action-text); }
[data-exposure-component="control"][data-exposure-variant="media"]:hover { background: var(--color-brand-dark); color: var(--color-heading-on-dark); }
:is([data-exposure-component="button"], [data-exposure-component="control"]):focus-visible { outline: 2px solid var(--surface-heading); outline-offset: 4px; }
:is([data-exposure-component="button"], [data-exposure-component="control"]):active { filter: brightness(.88); }
:is([data-exposure-component="button"], [data-exposure-component="control"]):is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; filter: none; }