/* Design tokens and control defaults */
@layer base {
  :root {
    --ctrl-h: 2.75rem;   /* 44px — good touch target */
    --ctrl-h-md: 2.25rem;/* 36px */
    --ctrl-px: 0.75rem;  /* 12px */
    --ctrl-radius: 0.5rem;
    --ctrl-text: 0.95rem;
    --ctrl-text-md: 0.9rem;
  }
}

@layer utilities {
  /* Generic utility for interactive controls */
  .ui-ctrl {
    height: var(--ctrl-h);
    padding-left: var(--ctrl-px);
    padding-right: var(--ctrl-px);
    border-radius: var(--ctrl-radius);
    font-size: var(--ctrl-text);
  }
  @media (min-width: 768px) {
    .ui-ctrl {
      height: var(--ctrl-h-md);
      font-size: var(--ctrl-text-md);
    }
  }

  /* Nuke default focus rings/shadows; rely on bg/color changes */
  .ui-ctrl:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}