/* Generated by @osmanbits/design-tokens from tokens/styles/studio. Do not edit. */
[data-style="studio"], :where(:root) {
  --style-radius-sm: 0.25rem;
  --style-radius-md: 0.5rem;
  --style-radius-lg: 0.75rem;
  --style-radius-xl: 1rem;
  --style-radius-full: 999px;
  --style-shape-control: var(--style-radius-md);
  --style-shape-field: var(--style-radius-md);
  --style-shape-container: var(--style-radius-lg);
  --style-shape-dialog: var(--style-radius-xl);
  --style-shape-checkbox: var(--style-radius-sm);
  --style-shape-badge: var(--style-radius-full);
  --style-shape-switch: var(--style-radius-full);
  --style-shape-toast: var(--style-radius-md);
  --style-shape-tab-indicator: 0;
  --style-surface-page: var(--semantic-bg-canvas);
  --style-surface-container: var(--semantic-bg-surface);
  --style-surface-container-high: var(--semantic-bg-surface-raised);
  --style-surface-control: var(--semantic-action-secondary-bg);
  --style-surface-field: var(--semantic-bg-surface);
  --style-on-surface: var(--semantic-text-primary);
  --style-on-surface-variant: var(--semantic-text-secondary);
  --style-toast-bg: var(--semantic-bg-inverse);
  --style-toast-fg: var(--semantic-text-inverse);
  --style-switch-thumb-off: var(--semantic-text-secondary);
  --style-focus-ring-width: 3px;
  --style-focus-ring-offset: 2px;
  --style-focus-ring-color: var(--semantic-focus-ring);
  --style-border-width-control: 1px;
  --style-border-width-container: 1px;
  --style-border-color-control: var(--semantic-border-strong);
  --style-border-color-container: var(--semantic-border-default);
  --style-border-color-divider: var(--semantic-border-default);
  --style-border-color-error: var(--semantic-status-danger-fg);
  --style-field-border-width: 1px;
  --style-field-border-width-focus: 2px;
  --style-field-indicator-width: 0px;
  --style-field-border-color: var(--semantic-border-strong);
  --style-field-shadow: none;
  --style-state-hover-opacity: 0.08;
  --style-state-focus-opacity: 0.12;
  --style-state-pressed-opacity: 0.16;
  --style-state-disabled-content-opacity: 0.38;
  --style-state-disabled-container-opacity: 0.12;
  --style-density-control-height: 3rem;
  --style-density-touch-target: 3rem;
  --style-density-control-padding-inline: 1.25rem;
  --style-density-field-padding-inline: 0.75rem;
  --style-density-field-padding-block: 0.75rem;
  --style-density-container-padding: 1.5rem;
  --style-density-gap: 0.75rem;
  --style-motion-duration-short: 120ms;
  --style-motion-duration-medium: 200ms;
  --style-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --style-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --style-font-weight-control: 600;
  --style-font-weight-heading: 700;
  --style-letter-spacing-control: 0;
  --style-elevation-0: none;
  --style-elevation-1: 0 1px 2px rgb(0 0 0 / 0.10), 0 1px 3px rgb(0 0 0 / 0.08);
  --style-elevation-2: 0 2px 4px rgb(0 0 0 / 0.10), 0 4px 10px rgb(0 0 0 / 0.08);
  --style-elevation-3: 0 6px 12px rgb(0 0 0 / 0.10), 0 12px 28px rgb(0 0 0 / 0.08);
  --style-elevation-control: none;
  --style-elevation-control-hover: 0 1px 2px rgb(0 0 0 / 0.10);
  --style-elevation-control-pressed: none;
  --style-elevation-inset: none;
}
[data-style="studio"][data-theme="dark"], :where(:root[data-theme="dark"]) {
  --style-elevation-0: none;
  --style-elevation-1: 0 1px 2px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.35);
  --style-elevation-2: 0 2px 4px rgb(0 0 0 / 0.45), 0 4px 10px rgb(0 0 0 / 0.35);
  --style-elevation-3: 0 6px 12px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.35);
  --style-elevation-control: none;
  --style-elevation-control-hover: 0 1px 2px rgb(0 0 0 / 0.45);
  --style-elevation-control-pressed: none;
  --style-elevation-inset: none;
}